在平时的开发中，为了加强用户体验，不多不少都会用到一些动画效果，在CSS3以前使用JavaScript来设置属性的变化来完成动画，如果要实现一些比较炫的动画，实现起来就比较麻烦了，出现了CSS3后，使得动画的实现更简单了，性能也更加好。CSS3中用于设置动画的属性包括三个，分别为transform、transition，animation。

1.CSS动画支持检测

如果需要兼容所有的浏览器，在某些浏览器中，CSS动画属性并不支持，需要通过js来检测浏览器是否支持css3动画，对于检测的代码，在MDN上有很好的实现了。

var animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '',
    elm = document.createElement('div');

if( elm.style.animationName !== undefined ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

2.transform

设置transform相关的属性，可以对元素进行移动、缩放、转动、拉长，拉伸。主要是用于改变元素的形状、位置、和尺寸等，包含2D转换和3D转换。

2.1. 2D转换

2D转换主要包括以下的转换方法：

• translate：移到到指定的位置。
• rotate：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• scale：将原始尺寸放大或缩小指定的倍数。
• skew：根据给定的水平线（X 轴）和垂直线（Y 轴）参数翻转指定的角度。
• matrix：把所有 2D 转换方法组合在一起。

2.2. 3D转换

使用 3D 转换来对元素进行格式化，主要包括如下方法：

• rotateX：元素围绕其 X 轴以给定的度数进行旋转。
• rotateY：元素围绕其 Y 轴以给定的度数进行旋转。

3.transition

transition可以用于表示一个或多个属性的过度效果，多个属性之前用逗号隔开。

什么是过渡？
过渡是指元素从一种样式逐渐改变成另一种样式的效果。

transition主要通过设置一些属性来完成动画，具体的相关属性如下所示：

• transition-property：用于设置执行动画的CSS属性，也可以指定为all或者none。
• transition-duration：动画持续的时间。
• transition-timing-function：动画执行时的曲线效果。
• transition-delay：动画延长时间。

3.1 transition-timing-function

transition的属性除了trainsition-timing-function都比较好理解，这里需要重点介绍下transition-fiming-function的使用，该属性主要是用于设置动画执行时的曲线效果，也就是执行的速率控制。transition-timing-function包括以下6种值。

• linear：默认值，匀速进行。
• ease：先慢后快，最后慢速停止。
• ease-in：以慢速开始。
• ease-out：以慢速结束
• ease-in-out：以慢速开始和结束的过渡效果。
• cubic-bezier(n,n,n,n)：自定义速率，可以设置0 至 1 之间的数值。曲线在短时间内越陡，说明这段时间动画的完成度很高，动画进行得快 。反之，竖轴上升慢，动画进行得慢。可以使用贝塞尔曲线工具设置贝塞尔曲线的值。

4.animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。animation包括以下子属性：

• animation-name：用于指定@keyframes的名称。
• animation-duration：用于指定动画持续的时间。
• animation-timing-function：用于指定动画的速度曲线。
• animation-delay：用于指定动画延长多少秒后执行。
• animation-iteration-count：用于指定动画播放的次数， 可以指定infinite无限次重复动画
• animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
• ** animation-play-state：**允许暂停和恢复动画。
• ** animation-fill-mode：**指定对象动画时间之外的状态。

4.1 @keyframes

@keyframes规则通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。如下所示：

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

每个@keyframes规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。from等效于 0%。to等效于 100%.

4. animation与transition使用场景选择

transition一般用于过渡动画，从一个属性值变成另一个属性值，中间没有穿插其它动画的场景。如果动画不是连续的，中间会穿插其它的动画，则使用animation。
个人博客