transition和animation

本文主要介绍css动画相关的属性：transition和animation。

1. transition(过渡)

transition的属性包括以下几个：

  transition-property: height; // 变化的属性
  transition-duration: 1s;   // 变化的时间
  transition-delay: 1s;  // 事件发出后 变化开始的延时
  transition-timing-function: ease;  // 变化的类型函数

完整写法：

  transition: 1s 1s height ease

注意事项：

1. 不是所有的css属性都支持transition。
2. transition需要明确知道开始状态和结束状态的具体数值，才能计算出中间状态。如开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display:none到display:block，background: url(foo.jpg)到background: url(bar.jpg)等。

局限

1. transition是一次性的，不能重复发生，除非一再触发。
2. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

2. Animation(动画)

Animation的属性包括以下几个：

animation-name: rainbow;   // 名称
animation-duration: 1s;  // 时长
animation-timing-function: linear;  // 变换函数
animation-delay: 1s;  // 延时
animation-fill-mode:forwards;  // 动画结束后的状态
animation-direction: normal;  //   动画播放的方向 影响循环播放的效果
animation-iteration-count: 3;  //   循环播放的次数

完整写法：

  animation: 1s 1s rainbow linear 3 forwards normal;

animation-fill-mode

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
可以设定的值：

1. none：默认值，回到动画没开始时的状态
2. forwards：动画停留在结束状态
3. backwards：让动画回到第一帧的状态
4. both：根据animation-direction轮流应用forwards和backwards规则

animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。
可以取值为：normal、alternate、reverse、alternate-reverse，他们对应的效果如下：

Paste_Image.png

animation-play-state

animation-play-state 是独立于animation的一个单独的属性。动画播放时突然停止，这时默认行为是跳回到动画的开始状态，如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。

  div {
       animation: spin 1s linear infinite;
       animation-play-state: paused;
   }
   div:hover {
     animation-play-state: running;
   }

停止时设为paused，运行时设置为running，就可以继续上一个状态继续运行动画。

参考文章

CSS动画简介