css动画

关键帧

关键帧（keyframe）是指动画过程中某个特定时刻。我们定义一些关键帧，浏览器负责填充或者插入这些关键帧之间的帧图像

创建关键帧动画

 @keyframes over-and-back {
    0% {
      background-color: hsl(0, 50%, 50%);
      transform: translate(0);
    }

    50% {
      transform: translate(50px);
    }

    100% {
      background-color: hsl(270, 50%, 90%);
      transform: translate(0);
    }
  }

动画属性animation

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
默认值：none 0s ease 0s 1 normal

值	描述
animation-name	规定需要绑定到选择器的 keyframe(关键帧动画) 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

值	描述
none（默认）	动画执行前或执行后动画样式都不会应用到元素上
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
forwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。