CSS Transitions：CSS动画过渡效果

什么是CSS Transitions？CSS Transitions（CSS过渡动画）可以让你制作出平滑的动画效果。如果你从未使用过CSS Transitions，可以看看下面的示例。

在你想要制作动画效果的元素上添加下面的代码：

#id_of_element {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}                             
                            

代码中所有语句的取值都是相同的，只是分别使用了不同浏览器厂商的前缀。如果你觉得麻烦，可以使用像Less和SASS等工具，它们允许你定义mixins以避免重复代码。或者你也可以只写不带前缀的CSS代码，然后使用prefix-free js插件来在运行动动态的添加前缀。

注意这里没有使用-ms-前缀，IE10浏览器是第一个不需要使用厂商前缀就能使用CSS Transitions的浏览器。但是IE10的beta版本需要-ms-前缀，所以有时候你会在别人的代码中看到他在写Transitions使用-ms-前缀。

Transitions的语法是否简单，你只需要指定你想要执行动画过渡效果的属性：all或border-radius或color等等。然后指定动画持续时间以及动画的easing效果。

每当指定的元素属性发生动画的时候，它们都会平滑的过渡，而不是直接就从一个状态变为另一个状态。下面的例子在鼠标滑过的时候各个元素的指定属性会发生平滑过渡的Transitions动画效果。

Different timing functions

延时

CSS3 transition的语法如下：

transition:  [ <transition-property> ||
               <transition-duration> ||
               <transition-timing-function> ||
               <transition-delay> ]                              
                            

最后一个参数是一个时间延时，它是在触发动画事件发生之后多少时间开始执行过渡效果，来看下面的demo。

过渡延时

上面的效果为每一个小球都添加了不同的时间延时，添加延时的语法非常简单：transition-delay: 0.6s;。

高级延时效果

你可以为不同的元素分别设置不同的transition属性，下面的例子蓝色小球的transition如下：

#dd_main1 {
  transition: all 1s ease-in-out;
}                              
                            

绿色小球的transition如下：

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}                        
                            

红色小球的transition如下：

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}                     
                            

最后所得到的结果如下：

可以执行动画的CSS属性

关于哪些是可以动画的属性，最好的办法是做实验。W3C列出了一组可以动画CSS属性列表-CSS Transitions spec。这组列表中包含了许多CSS属性，其中的很多属性都不能使用jQuery来制作动画。

事实上，浏览器允许动画的CSS属性不止这些，例如box-shadow也可以制作动画效果。下面的表格中列出了一些常用的可用于动画的CSS属性。

属性名称	类型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

浏览器支持

所有的现代浏览器都支持CSS Transitions：

• chrome1.0+
• firefox4.0+
• opera10.5+
• safari3.2+
• ie10+