42. CSS3 transition-property设置动画过渡属性
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition
,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
- 在默认样式中声明元素的初始状态样式;
- 声明过渡元素最终状态样式,比如悬浮状态;
- 在默认样式中通过添加过渡函数,添加一些不同的样式。
CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性:
transition-property
:指定过渡或动态模拟的CSS属性;transition-duration
:指定完成过渡所需的时间;transition-timing-function
:指定过渡函数;transition-delay
:指定开始出现的延迟时间;
先来看transition-property属性
transition-property
用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
实例演示
HTML代码:
<div></div>
CSS代码:
div { width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; } div:hover { background-color: orange; }
效果如下:
特别注意:当
transition-property
属性设置为all
时,表示的是所有中点值的属性。
用一个简单的例子来说明这个问题:
假设你的初始状态设置了样式width、height、background,当你在终始状态都改变了这三个属性,那么all
代表的就是width、height和background。如果你的终始状态只改变了width和height时,那么all
代表的就是width和height。
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 42. CSS3 transition-property设置动画过渡属性
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 42. CSS3 transition-property设置动画过渡属性