CSS动画

本文原地址

1. transition

（1）使用

// 简写
transition: height 1s 1s ease;

// 具体属性
transition-property: height;        // 指定需要动画的属性
transition-duration: 1s;            // 动画执行时间
transition-delay: 1s;               // 动画延迟执行时间
transition-timing-function: ease;   // 动画运动曲线

（2）使用注意

• 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
• 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
• transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

（3）局限

• transition需要事件触发，所以没法在网页加载时自动发生。
• transition是一次性的，不能重复发生，除非一再触发。
• transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
• 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

2. animation

(1) 使用

// 简写
div:hover {
  animation: rainbow 1s 1s 3 linear forwards normal;
}

// 具体属性
div:hover {
  animation-name: rainbow;              // 动画关键字
  animation-duration: 1s;               // 动画执行时间
  animation-delay: 1s;                  // 动画延迟执行时间
  animation-iteration-count: 3;         // 动画执行次数，infinite：无限循环
  animation-timing-function: linear;    // 动画运动曲线
  animation-fill-mode: forwards;
  // 动画结束以后，会立即从结束状态跳回到起始状态。
  // forwards: 让动画停留在结束状态。
  // none：默认值，回到动画没开始时的状态。
  // backwards：让动画回到第一帧的状态。
  // both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
  animation-direction: normal;
  // 动画执行的顺序
  // normal：按照关键字顺序正常执行
  // alternate：不常用，兼容性不好
  // reverse: 按照关键字顺序逆序执行
  // alternate-reverse：不常用，兼容性不好
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

3. 兼容各个浏览器

—前缀—	—浏览器—
-webkit-	chrome、safari
-moz-	firefox
-ms-	IE
-o-	opera

以上前缀使用可以参考Can I use

参考资料

• CSS动画简介-阮一峰
• 动画曲线工具网站
• CSS技巧：逐帧动画抖动解决方案
• css3常用动画+动画库