（1）transition-property 设置过渡的属性，比如：width height background-color
（2）transition-duration 设置过渡的时间，比如：1s 500ms
（3）transition-timing-function 设置过渡的运动方式，常用有linear（匀速）| ease（缓冲运动）
（4）transition-delay 设置动画的延迟
（5）transition：property duration timing-function delay; 同时设置
<head>
<meta charset="utf-8">
<title>transition动画</title>
<style type="text/css">
.box{ ???width: 100px; ???height: 100px; ???background-color: yellow; ???transition: all 500ms ease,background-color 2s ease;}.box:hover{ ???width: 500px; ???height: 500px; ???background-color: red;}</style></head>
<body>
<div class="box"></div></body>
例子二：图片说明文字
<head>
<meta charset="utf-8">
<title>图片</title>
<style type="text/css">
.box{ ???width: 320px; ???height: 405px; ???margin: 50px auto 0; ???position: relative; ???overflow: hidden;}.text{ ???width: 320px; ???height: 100px; ???position: absolute; ???top: 405px; ???background-color: rgba(124,119,119,0.30); ???transition: all 500ms ease;}.box:hover .text{ ???position: absolute; ???top: 305px;}</style></head>
<body>
<div class="box">
<img src="images/3_02.png" alt="星空">
<div class="text">
???????????<h3>夜空中最亮的星</h3> ???????????<p>我在思考人生</p> ???????</div></div></body>
例子三：夏目
<head>
<meta charset="utf-8">
<title>joke</title>
<style type="text/css">
@keyframes joke{ ???from{ ???????left: 0px; ???} ???to{ ???????left: -2136px; ?????/*图片宽度*/ ???}}.box{ ???width: 534px; ???height: 300px; ???margin: 50px auto; ???overflow: hidden; ???position: relative;}.box img{ ???position: absolute; ???animation: joke 1s steps(4) infinite;}</style></head>
<body>
<div class="box"> ???<img src="images/xia.png" alt="夏目友人帐"></div></body>
CSS3 transition动画
原文地址：http://blog.51cto.com/13742773/2337008