CSS3中的动画功能(一)
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果。今天带大家一起来看看css3动画功能中的transitions的用法。
transitions用法:
transition:
property duration
timing-function
其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡其中包括:
linear[规定以相同速度开始至结束的过渡效果(等于
cubic-bezier(0,0,1,1))];
ease[规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))];
ease-in[规定以慢速开始的过渡效果(等于
cubic-bezier(0.42,0,1,1))];
ease-out[规定以慢速结束的过渡效果(等于
cubic-bezier(0,0,0.58,1))];
ease-in-out[规定以慢速开始和结束的过渡效果(等于
cubic-bezier(0.42,0,0.58,1))];
cubic-bezier(n,n,n)[ 在
cubic-bezier 函数中定义自己的值。可能的值是 0 至 1
之间的数值]。
Transitions示例:
背景颜色变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css3动画</title> <style> div{ background-color:#ffff00; -webkit-transition:background-color 1s linear; -moz-transition:background-color 1s linear; -o-transition:background-color 1s linear; } div:hover{ background-color:#00ffff; } </style> </head> <body> <div>示例文字</div> </body> </html>
效果代码:
<style> #transition{ background-color:#ffff00; -webkit-transition:background-color 1s linear; -moz-transition:background-color 1s linear; -o-transition:background-color 1s linear; } #transition:hover{ background-color:#00ffff; } </style> <div id="transition">示例文字</div>
使用transitions功能时同时平滑过渡多个属性值:
<style> #tmore{ background-color:#ffff00; height:50px; -webkit-transition:background-color 1s linear,color 1s linear,height 1s linear; -moz-transition:background-color 1s linear,color 1s linear,height 1s linear; -o-transition:background-color 1s linear,color 1s linear,height 1s linear; } #tmore:hover{ background-color:#00ffff; height:100px; } </style> <div id="tmore">示例文字</div>
在展示一个示例,将下面的文字换成图片效果会更好:
<style> #imgtr{ position:absolute; left:0; background-color:#ffff00; -webkit-transform:rotate(0deg); -webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear; -moz-transform:rotate(0deg); -moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear; -o-transform:rotate(0deg); -o-transition:left 1s linear,-o-transform 1s linear,height 1s linear; } #imgtr:hover{ position:absolute; left:30px; -webkit-transform:rotate(720deg); -moz-transform:rotate(720deg); -o-transform:rotate(720deg); } </style> <div id="imgtr">示李文忠</div>
关于css3中的动画,今天就写这些,还有一个动画下次在说了,亲记得关注哦。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。