深入学习css3动画属性Transition

2019-09-13 郑州网站建设  

transition[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

 

默认值:看每个独立属性

 

取值:

 

[ transition-property ]:检索或设置对象中的参与过渡的属性

[ transition-duration ]:检索或设置对象过渡的持续时间

[ transition-timing-function ]:检索或设置对象中过渡的动画类型

[ transition-delay ]:检索或设置对象延迟过渡的时间

看完这个我就觉得这个玩意跟css中的border是差不多类似的写法的。

实例在这里:

例如:

transition:color 0.2s easy-in-out .1s;

这个就是缩写起来的写法了。

那么如果你要拆开来如何办呢?

 

transition-property:color; transition-duration:.2s; transition-timing-function:ease-in-out; transition-delay:.1s; 这种写法就跟我刚才说到的border是差不多的,就是把效果拆出来,这样子实现了多种效果同时响应。当然定义不同的速率和显示的间隔也会有精彩的结果哦。 transition:color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s; 拆出来就是下面这样子了。

 

transition-property:color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s;

 

关于transition-property的取值如下:(基本是css属性都能用了)

 

transition-property none | all | [ <IDENT> ] [ ',' <IDENT> ]*

 

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改)all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下:

 

1color通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-colorborder-colorcoloroutline-colorCSS属性;

 

2length:真实的数字,如:word-spacingwidthvertical- aligntoprightbottomleftpaddingoutline-widthmarginmin-widthmin- heightmax-widthmax-heightline-heightheightborder-widthborder- spacingbackground-position等属性;

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2084.html转载请标明出处,谢谢合作!
标签:
  • [
  • transition
  • css3Transiti