CSS动画

css动画是通过创建特定时间点的行为来创建动画。所以，我们需要在0%到100%的时间中创建特定的css规则。@keyframes属性就是添加特定时间动画属性的规则。

用法

@keyframes 修改的css规则 {
  时间 {
    css修改的样式；
  }
  时间 {
    css修改的样式；
  }

用animation-name:名称;给@keyframes动画规定一个名称

div
{
animation-name:cherry;
}

用animation-duration: 时间；可修改动画从开始时到结束时所需要的时间。

不过，这个属性是写在原来的css样式中，并不是在@keyframes属性中声明：

div
{
animation-duration:2s;
}

animation-iteration-count: 数量;可规定动画播放的次数。如果定义成infinite；则动画无限次播放；

div
{
animation-iteration-count:3;
}

animation-play-state:paused;暂停动画

animation-play-state:running;播放动画

animation-timing-function 规定动画的速度曲线。

可以用cubic-bezier(n,n,n,n)贝塞尔曲线来定义

div
{
animation-timing-function:cubic-bezier(0.1,0.1,0.1,0.1);
}