CSS3 transitions
CSS3 用于处理带有 CSS3 属性的动画速度，与 transitions 一起使用，我们可以添加效果和运行效果
CSS3 transitions属性
CSS中用于 transitions 的一些常见属性
| 值 | 描述 |
|---|---|
| transition | 用于将四个过渡属性添加到一个属性中 |
| transition-delay | 用于在使用过渡时进行一些延迟 |
| transition-duration | 用于查找，运行动画正在发生多少秒/毫秒 |
| transition-property | 用于指定属性名称 |
| transition-timing-function | 用于指定要执行运行转换的时间函数 |
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: pink;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
</style>
</head>
<body>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</body>
</html>
