1.transition动画
（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>
扫描二维码关注公众号，回复：
4699820 查看本文章
例子二：图片说明文字
<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>
