css3动画属性

定义动画 动画定义后，可以无限次被使用，动画过程有多少个状态，取决于动画本身的运行轨迹，不是所有的动画都有同样的状态的
@keyframes 动画名{
动画执行过程
}

使用动画：animation:动画名 动画执行时间 动画执行次数 动画运行轨迹（动画平滑）

案例：

（1）html

<div></div>
<p></p>

（2）css

div{
width: 100px;
height: 100px;
background: red;
animation: play 3s infinite linear;
}
@keyframes play{
0%{
transform: translate(0,0);
}
25%{
transform: translate(500px,0);
}
50%{
transform: translate(500px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
p{
width: 100px;
height: 100px;
background: lime;
animation: play 10s;
}