CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。
ransition-property – 过渡的CSS属性的名称,例如:opacity。
transition-duration – 定义过渡效果花费的时间。默认值为 0。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay -过渡效果何时开始。默认是 0。
实例:
<style>
div{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
-moz-transition:width 1s linear 2s;/* Firefox 4 */
-webkit-transition:width 1s linear 2s;/* Safari and Chrome */
-o-transition:width 1s linear 2s;/* Opera */
}
div:hover{
width:200px;
}
</style>
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
transition的使用注意
transition的局限