CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 、500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速) | ease(缓冲运动)
4、transition-delay 设置动画的延迟1s 、2s、500ms等
5、transition: property duration timing-function delay 同时设置四个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:gold;
/* transition:width 1s ease,height 1s ease 1s,background-color 1s ease 2s; 此时有延迟，先水平方向变宽，1s后垂直方向拉伸高度，再1s后整体背景色渐变为红色*/
/*
多个属性同时做动画，可以合并成下面一句
transition:width 1s ease,height 1s ease,background-color 1s ease; 此时无延迟。
*/
transition:all 1s ease;
}
.box:hover{
width:600px;
height:500px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
例子：制作鼠标移入图片时，图片说明滑入的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pic_con{
width:200px;
height:300px;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.pic_info{
position:absolute;
left:0;
top:300px;
width:180px;
height:100px;
background-color:rgba(0,0,0,0.3);
color:#fff;
padding:10px;
/*transition-property:all;
transition-duration:500ms;
transition-timing-function:ease;*/
transition:all 500ms ease;
}
.pic_con:hover .pic_info{
top:180px;
}
</style>
</head>
<body>
<div class="pic_con">
<img src="images/banner01.jpg" alt="banner">
<div class="pic_info">
<h3>文字说明标题</h3>
<p>文字说明文字说明文字说明文字说明</p>
</div>
</div>
</body>
</html>
