css3动画transition的使用和介绍

站长手记 作者: 2024-08-28 13:55:01
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的局限

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70156.html
css3动画 transition