CSS animation

前言

CSS可用来制作简单的动画，效能会比JS好很多。

属性

animation-delay

设定动画读取完毕再到开始时的延迟时间，有时候不想让动画这麽快开始就会使用这个属性。

animation-direction

设定动画的执行方向

animation-direction: normal; //顺向执行~
animation-direction: reverse; //反向执行
animation-direction: alternate; //顺向,动画结束前一刻反向执行回来
animation-direction: alternate-reverse; //反向执行，动画结束前一刻顺向执行回来

animation-duration

设定一个动画完整周期的时间

animation-iteration-count

设定动画执行次数，预设为一次。

animation-iteration-count : infinite; //无限
animation-iteration-count : 3 ; //执行三次

animation-name

设定使用哪一个动画，需搭配 @key-frames

animation-name : rotate; //rotate是key-frames的名称

key-frames 关键影格

可定义元素在哪一个时间点要做什麽动画。
from = 一开始元素的效果
to = 结束之後元素的效果
过程中keyframes rotate 就会使元素旋转360度

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

此外还可使用百分比的方式设定在哪一个时间点为元素添加动画
动画时间0~50%先转50度，50%~100%元素转了310度~

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50%{
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(360deg);
  }
}