css3中transition属性详解

W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

1. transition过渡属性transition 属性是一个简写属性,用于设置四个过渡属性:语法transition: property duration timing-function delay;

值描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。 transition-delay定义过渡效果何时开始。

all:表示针对所有元素。none:表示没有元素。ident:指定CSS属性列表注:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。transition可以和Transform同时使用。

transition:

transition-timing-function 的五种取值:

1.ease 逐渐变慢2.linear 匀速3.ease-in 缓慢开始(加速)4.ease-out 缓慢结束(减速)5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)6.cubic-bezier 贝塞尔曲线(matthewlein.com/ceaser)过渡模式比如宽过渡,高过渡和all过渡

看一个实例

复制代码代码如下: .trans1{ -webkit-transition:0.5 ease; -moz-transition:0.5s ease; -webkit-transition-property:all; -moz-transition-property:all; position:absolute; left:10px; top:50px; height:100px; width:150px; background:#EF4900; color:white; } .trans2{ -webkit-transition:0.5 ease; -moz-transition:0.5s ease; -webkit-transition-property:width; -moz-transition-property:width; position:absolute; left:350px; top:50px; height:100px; width:150px; background:#EF4900; color:white; } .trans3{ -webkit-transition:0.5s ease; -moz-transition:0.5s ease; -webkit-transition-property:height; -moz-transition-property:height; position:absolute; left:780px; top:50px; height:100px; width:150px; background:#EF4900; color:white; } .trans1:hover{ width:300px; height:300px; } .trans2:hover{ width:400px; } .trans3:hover{ height:500px; }

变换所有的属性只变换宽度属性只变换高度属性

以上就是css3中transition属性详解的详细内容,更多请关注AdminJS其它相关文章!

【wWW.adminJS.CN 工作生活学习必备 】

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

本文地址:css3中transition属性详解