CSS动画属性汇总

@keyframes

说明：@keyframes用于定义动画，其实动画原理很简单，就是不同的时刻改变css的样式，以百分比规定改变发生的时间，它有两个关键词即from和to,from等价于0&表示起始位置，to等价于100%表示结束位置。

animation-name属性

说明：该属性用于定义动画名字，上面的例子中"move"就是动画的名字，它的默认值为none，当我们想取消动画效果时可以设置为none。

animation-duration属性

说明：定义动画完成一个周期所花费的时间，默认值为0，单位为s也可以是ms，上面的例子中是2s。

animation-timing-function属性

说明：该属性定义速度曲线。上面的例子中，实际上相当于:

.animation {
  animation: move 2s infinite;
  animation-timing-function: ease;
}

ease默认值，表示低速开始，中间加快，结尾变慢
ease-in表示低速开始
ease-out表示低速结束
ease-in-out表示低速开始和结束
linear表示匀速
cubic-bezier(n,n,n,n)自定义贝塞尔曲线。

animation-delay属性

.animation {
  animation: move 2s infinite;
  animation-delay: 1s;
}

说明：该属性定义动画等待多长时间后开始，只有第一次运动时会等待，值单位可以为m和ms。值可以是负值，负值表示跳过指定时间的动画，以上面的例子来说，如果animation-delay: -1s;,相当于动画被抵消了1s，剩余1s时间，从中间开始运动到结束。

animation-iteration-count属性

.animation {
  animation: move 2s infinite;
  animation-iteration-count: 5;
}

说明：该属性表示动画运动的次数，默认运动1次。属性值为数字，也可以是infinite表示无限次运动。

animation-direction属性

.animation {
  animation: move 2s infinite;
  animation-direction: alternate;
}

说明：该属性定义动画在偶数次数倒序播放，默认值normal表示正常播放，可选值alternate动画轮流反向播放。

animation-play-state属性

.animation {
  animation: move 2s infinite;
  animation-play-state: paused;
}

说明：该属性规定动画是播放状态还是暂停状态，默认值running，可选值paused暂停播放。通常配合脚本使用，暂停后再播放是从暂停的位置继续运动。

animation-fill-mode属性

.animation {
  animation: move 2s infinite;
  animation-delay: 2s;
  animation-fill-mode: both;
}

说明：该属性规定动画播放前后，动画效果是否可见。这是一个非常重要的属性。一个物体如果设置了动画，他肯定有运动前的状态和运动结束后的状态，默认值none表示保持默认行为，即动画从起始状态到结束状态，然后一下子跳到起始状态并定格在这里。forwards表示动画结束后定格在结束的状态。backwards这个属性可以让我们制作队列动画，比如我们有move1和move2两个动画，我们希望move1结束后，move2开始运动，我们为move2设置animation-delay使他等于move1的运动时长，但是在move1结束之前move2要保持在起始状态做准备运动，这时候为move2设置animation-fill-mode: backwards就可以了，该属性表示在animation-delay这段时间，元素保持在运动的起始状态。both属性是最常用的一个属性，表示在等待时间内保持在起始状态，结束后保持在结束状态。

animation属性

.animation {
  animation: move 2s ease infinite ;
}

说明：这是一个简写属性，它是以下六个属性的简写：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

表示“动画名字，运动时间，曲线函数，等待时间，播放次数，是否倒序”。