CSS3——动画

一、使用transition制作交互动画

在CSS中transition表示属性渐进变化的效果。

例如：

$(element).css('width','10px');

使用以上的jQuery代码可以改变元素的宽度，但是这样的改变会感到很突兀，在某些场景下，可能需要的是平滑渐进的动画效果。在CSS3出现之前，可以使用JavaScript来实现，在CSS3出现之后，可以应用transition属性制作动画中的过渡效果，transition相比于JavaScript实现更容易，而且可以应用浏览器的硬件加速效果，实现更高的性能。

transition允许CSS的属性值在一定的时间区间内平滑地过渡。
示例：

div {
	transition: height 0.6s;
}

以上代码表示高度如果发生变化，那么在0.6秒内完成平滑地过渡。

如果需要同时改变多个属性，可以使用逗号隔开。
示例：

div {
	transition: width 2s, height 1s;
}

以上的代码表示当宽度和高度同时发生改变时，都会加上过渡动画。

transition可以包含设置渐进动画的函数，相关的函数类型如下所示：

• ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线（0.25，0.1，0.25，1.0）。
• linear：（匀速），linear函数等同于贝塞尔曲线（0.0，0.0，1.0，1.0）。
• ease-in：（加速），ease-in函数等同于贝塞尔曲线（0.42，0，1.0，1.0）。
• ease-out：（减速），ease-out函数等同于贝塞尔曲线（0，0，0.58，1.0）。
• ease-in-out：（加速然后减速）：ease-in-out函数等同于贝塞尔曲线（0.42，0，0.58，1.0）。
• cubic-bezier：允许开发者自定义一个时间曲线。

transition还可以设置动画的延迟时间，表示延迟多少秒后执行动画，一个添加了所有属性的transition定义如下：

transition: all 0.5s ease-in-out 1s;

其中all表示任意属性的变化都应用过渡动画效果。
以上示例的4个参数依次表示：属性、过渡时间、过渡函数、延迟时间。

二、使用@keyframes制作动画

1、@keyframes的基本语法：

示例：

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

@keyframes声明后紧跟动画的名称，花括号内部就是一些不同时间段的样式规则。@keyframes必须配合元素中定义的animation属性，它用于定义动画，语法规则为：

animation: spin 8s infinite linear;

第1个参数是动画名称，第2个参数是动画执行一次的时间，第3个参数是动画循环的次数，如果使用infinite表示无限循环，第4个参数是动画的速度函数，和transition中的速度函数一致。

此外还可以设置动画开始前的延迟时间、动画是否轮流反向播放等。
示例：

animation: name 8s linear 2s infinite alternate;

alternate表示动画正向循环完成后再反向循环。

当要控制动画的执行和暂停时，可以为元素添加animation-play-state属性。
animation-play-state参数中，paused用于暂停动画，running用于开启动动画。
示例：

animation-play-state: paused;

2、@keyframes总结

• 动画是使元素从一种样式逐渐变化为另一种样式。
• keyframs可以改变任意多的样式、任意多的次数。
• 使用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。
• 0%是动画的开始，100%是动画的完成。
• 为了得到最佳的浏览器支持，应该始终定义0%和100%选择器。

注意：IE10、Firefox以及Opera支持@keyframes规则和animation属性。Chrome和Safari需要前缀-webkit-。IE9以及更早的IE版本，不支持@keyframes规则或animation属性。