CSS3动画属性:转换(transition)

前端开发 作者: 2024-08-20 16:30:01
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,

一、transition-property

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

二、transition-duration

transition-duration : <time> [,<time>]* 

三、transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>) [,ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>)]* 

四、transition-delay

transition-delay : <time> [,1)">transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

a {
    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    -webkit-transition:
    -o-transition:
    transition:
 all 0.5s ease-in; all 0.5s ease-in;
  }
p {
  -webkit-transition: all .5s ease-in-out 1s;
  -o-transition:
  -moz-transition:
  transition: all .5s ease-in-out 1s;
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65609.html