9.3 动画

3、动画

3.1 @keyframes

语法格式：

@keyframes animationname{
    keyframes-selector{
                css-styles;
        }
}

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画结束。
css-style：定义执行到当前关键帧时对应的动画状态，有css样式属性进行定义，多个属性之间用分号分隔，不能为空。

@keyframes appear{
  0%{
    opacity:0;  /*动画开始时的状态，完全透明*/
  }
  100%{
    opacity:1;/*动画结束时的状态，完全不透明*/
  }
}

3.2 animation-name属性

animation-name 属性为 @keyframes 动画规定名称。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
语法格式：
animation-name: keyframename|none;

div{
    animation:mymove 5s infinite;
}

3.3 animation-duration属性

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
语法格式：
animation-duration: time;

div{
    animation-duration:2s;
}

3.4 animation-timing-function属性

animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法格式：
animation-timing-function: value;

3.5 animation-delay属性

animation-delay 属性定义动画何时开始。
animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
语法格式：
animation-delay: time;

div{
    animation-delay:2s;
}

3.6 animation-iteration-count属性

animation-iteration-count 属性定义动画的播放次数。
语法格式：
animation-iteration-count: n|infinite;

div{
    animation-iteration-count:3;
}

3.7 animation-direction属性

animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
语法格式：
animation-direction: normal|alternate;

div{
    animation-direction:alternate;
}

3.8 animation属性

与transition属性一样，animation属性也是一个简写属性，用于在一个属性中设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、六个动画属性。

animation：nimation-name  animation-duration  animation-timing-function  animation-delay  animation-iteration-count  animation-direction；

简写：

div {
  animation: example 5s linear 2s infinite alternate;
}