CSS3 transition
伴随着CSS3写行为transitions(过渡)和animations(动画)能力的演进。前端开发人员一直在寻求CSS和html之间交互的设计能力，不使用javaScirpt 或者Falsh , 这些年。现在，他们的愿望实现了。
使用CSS3 transitions你有潜力去改变 一个元素的外貌和行为无论什么时候状态发生改变，
例如鼠标 over, focused on、active、或者 targeted。
CSS3中的Animations 允许在多帧里(multiple keyframes)改变元素的外貌和行为。
Transitons 提供了从一个状态到另一个状态的改变，而 animations 能设置多个过渡点在不同的关键帧。
transitions
As mentioned , for a transition to take place , 一个元素必须有状态的改变和不同的样式被定义在每个状态。 最简单的方式去检测样式的不同的状态可以使用：:hover, :focus,:active,和 :target pseudo-classes
Transition一共有四个相关的属性，是 transition-property, transition-duration, transition-time-function, 和 transition-delay. 在创建 一个transition 不是所有的属性都是必须的，前三个属性时最常用的。
下面的例子是： 一个盒子在1s的过程中线性的变化它的背影颜色 duration(持续)
.box {
background: #2db34a;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.box:hover
{
background: #ff7b29;
}
Vendor Prefixes (特定前缀)
在上面的代码，文章中其他的部分的代码，都没有特定前缀。这样有意无前缀的好处使保持小且易于理解的代码片段。对于所有浏览器最好的支持，使用vendor prefixes（特定）前缀。
.box {
background: #2db34a;
-webkit-transition-property: background;
-moz-transition-property: background;
-o-transition-property: background;
transition-property: background;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
}
Transitional Property
transition-property 属性决定什么属性将会被改变连同其它过渡属性。 默认情况下， 一个元素的所有的属性在不同的状态里被改变。 然而，只有在transition-property 里定义的属性将会在过渡中被改变。
在上面的例子中， background 属性在transition-property 值里被定义。background 属性是唯一一个属性以 1s线性风格持续改变的属性。在元素状态改变时，元素的其他的属性，没有被包含在transition-property 值中，将不会收到在transition-duration 或 transition-timing-function 属性中设置的 transition 行为。
如果多个属性需要被过渡，在transtion-property值中逗号分开这些属性值。另外，这些关键值可以使用这个元素的所有transition值。
.box {
background: #2db34a;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
Transitional Properties
需要特别注意的： 并不是所有的属性值都能被过渡。只有属性有可以有过渡的中间点。Colors, font sizes 和像一些可以从一个值转换到另一个值过渡中可以被识别的另一个中间值。
例如： display属性，就没有过渡中的任何中间点。一些比较流行的 transitions 属性如下：
Transtion Duration (过渡时间)
一个过渡发生的时间使用 transition-duration 属性设置。这个属性值可以使用普通的时间值，包括 秒(s)和毫秒(ms). 这些事件值可以使用分数如 .2s。
当多个属性值需要过渡时你可以设置多个时间，每一个值对应一个属性。和transition-property 属性值一样，多个时间值 可以使用逗号分开。属性值和时间是一一对应的。例如，在 transition-property 属性里被定义的第一个属性的值 和在transition-duration 属性里被定义的第一个时间是匹配的， 等等。
如果多个属性被过渡而只有一个时间被定义，这一个值将会是所有过渡属性的过渡时间
.box {
background: #2db34a;
border-radius: 6px;
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
Transition Timing
Transition-timing-function 属性被用于设置过渡移动的速度。 Knowing the duration from the transition-duration property a transition can have multiple speeds within a single duration.（从 transition-duration 属性里知道 duration 一个时间里可以有多个速度）。一些transition-timing-function 属性里比较受欢迎的 关键值： linear, ease-in, ease-out, 和ease-in-out。
linear 关键值定义匀速的从一个状态过渡另一个状态。
ease-in： 加速
ease-out: 减速
ease-in-out: 变速
每一个 timing function 有一个 cubic-bezier curve （贝塞尔曲线），可以使用cubic-bezier(x1,y1,x2,y2) 值特别的设置,另外 值包含 step-start, step-stop, 和唯一确定的steps(number_of_steps, direction)步骤值。
当定义多个过渡属性时，你可以定义多个时间函数。 这些时间函数值，也可以定义多个过渡属性，使用逗号把这些值分开。
.box {
background: #2db34a;
border-radius: 6px;
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear, ease-in;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
Transition Delay(过渡延迟)
上面定义了过渡的property, duration,和time function ,你也可以设置一个延迟通过transition-delay 属性。 delay 设置一个时间值 ,秒或毫秒， 决定执行之前停滞多长时间。
和其他的过渡属性一样，需要 delay transitions ,每个delay 用逗号分开。
.box {
background: #2db34a;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear, ease-in;
transition-delay: 0s, 1s;
}
.box:hover
{
background: #ff7b29;
border-radius: 50%;
}
Shorthand Transitions
Declaring every transition property individually can become quite intensive, especially with vendor prefixes. Fortunately there is a shorthand property, transition, capable of supporting all of these different properties and values. Using the transition value alone, you can set every transition value in the order of transition-property, transition-duration, transition-timing-function, and lastly transition-delay. Do not use commas with these values unless you are identifying numerous transitions.
To set numerous transitions at once, set each individual group of transition values, then use a comma to separate each additional group of transition values.
.box
{
background: #2db34a;
border-radius: 6px;
transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover
{
color: #ff7b29;
border-radius: 50%;
}
一个模拟按钮的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.box
{
width: 100px;
height: 100px;
background: #2db34a;
transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover
{
background: #ff7b29;
border-radius: 50%;
}
button
{
border:0;
background-color: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
color: #fff;
cursor: pointer;
font: inherit;
margin: 0;
margin-top: 10px;
outline: 0;
padding: 12px 20px;
text-transform: all .1s linear;
}
button:active
{
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
</style>
</head>
<body>
<button>Awesome Button</button>
</body>
</html>
参考链接：
http://learn.shayhowe.com/advanced-html-css/transitions-animations/