利用css3属性:transition-duration来做简单的动画
2013-01-08 19:06
260 查看
transition-duration是属于css3的属性,用来指定对象过渡的持续时间。
为了兼容不同的浏览器,需要加上相应的前缀,有以下几种写法,我们设定持续时间为3秒:
首先,我们来做一个简单的移动。
放一个黄色的div在页面中,为了方便其移动,id为“test1”,设置其position为absolute,初始left值为0即起始的距离,当然最重要的transition-duration属性不要忘记咯,css如下:
接下来,我们还可以用css3中的transfrom来做一些其他的动画,比如鼠标hover的时候,div倾斜到某个角度。
代码如下:
最后,有个需要注意的是,如果通过javascript来设置transition-duration,原生的javascript可以这样用:
为了兼容不同的浏览器,需要加上相应的前缀,有以下几种写法,我们设定持续时间为3秒:
selector{ -webkit-transition-duration: 3s; -moz-transition-duration: 3s; -o-transition-duration: 3s; -ms-transition-duration: 3s; transition-duration: 3s; }这个属性怎么用来制作动画呢?既然是动画, 肯定有个初始状态和结束状态,那么我们只需要指定这两个状态就可以了。
首先,我们来做一个简单的移动。
放一个黄色的div在页面中,为了方便其移动,id为“test1”,设置其position为absolute,初始left值为0即起始的距离,当然最重要的transition-duration属性不要忘记咯,css如下:
div { width:300px; height:200px; position:absolute; left:0; background:yellow; -webkit-transition-duration: 3s; -moz-transition-duration: 3s; -o-transition-duration: 3s; -ms-transition-duration: 3s; transition-duration: 3s; }然后只需要在页面中,插入一段对left赋值的脚本就可以了,即对终点left赋值,使其移动到left:300px的位置,脚本如下:
var test1 = document.getElementById('test1'); test1.style.left='300px';ok,这样就实现了简单的水平移动。
接下来,我们还可以用css3中的transfrom来做一些其他的动画,比如鼠标hover的时候,div倾斜到某个角度。
代码如下:
<!DOCTYPE html> <html scrollbar="no"> <head> <title>transtion demo</title> <style type="text/css"> .animate { width: 300px; height: 200px; position: absolute; text-align: center; } .test1 { background: yellow; -webkit-transition-duration: 3s; } .test2 { top: 400px; background: green; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); -webkit-transition-duration: 3s; } .test3 { top: 800px; background: #000; -webkit-transition-duration: 3s; } .test3:hover { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } </style> </head> <body> <div class="animate test1" id="test1">test1</div> <div class="animate test2" id="test2">test2</div> <div class="animate test3" id="test3">test3</div> <script type="text/javascript"> var a = document.getElementById('test1'); a.style.left = '300px'; var b = document.getElementById('test2'); b.style.WebkitTransform = 'rotate(40deg)'; // a.style['-webkit-transition-duration'] = '3s'; // a.style['transition-duration'] = '3s'; </script> </body> </html>
最后,有个需要注意的是,如果通过javascript来设置transition-duration,原生的javascript可以这样用:
element.style['-webkit-transition-duration'] = '3s';这个只是很简单的一个应用,如果要用这个属性来做更多的应用,还需要自己再研究,看看别人的demo
相关文章推荐
- 利用css3属性:transition-duration来做简单的动画
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
- CSS3transition实现的简单动画菜单
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中动画属性transform、transition和animation
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画属性中的transition属性
- CSS3中的动画,animation、transition和transform属性的运用
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画属性--transition(转换)
- CSS3中动画属性transform、transition 和 animation
- CSS3中的Transition过度与Animation动画属性使用要点
- 利用CSS3的transition属性模仿鼠标移入闪光灯效果
- CSS3中和动画有关的属性有三个 transform、 transition 和 animation
- css3动画模块transform transition animation属性解释
- 【CSS3】动画--过渡属性 transition-property
- CSS3--利用transform和transition属性制作扇形导航
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3与动画有关的属性transition、animation、transform对比