css3 transition 动画基础
2015-02-05 00:48
399 查看
一、transition语法:
transition:[<transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>|| <transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>]
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
1、变化的属性:transition-property
transition-property : none | all | [<IDENT>][','<IDENT>]* ;
transition-property是用来指定当元素其中一个属性改变时执行transition效果,其中none没有属性改变;all所有属性都改变,它也是默认值;indent元素属性名,其对应的类型如下:
2、动画时间:transition-duration
transition-duration : <time> [,time]*;
transition-duration是动画执行的时间,单位为s(秒),比如0.1秒可以写成“0.1s”或者“.1s”,它可以作用于任何元素,包括:before和:after伪元素。
3、动画执行的方式:transition-timing-function
transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
ease:逐渐慢下来;linear:匀速;ease-in:由慢到快;ease-out:由快到慢;ease-in-out:先慢到快再到慢。
4、动画延迟:transition-delay
transition-delay : <time> [,time]* ;
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition动画效果,取值同transition-duration。
相关文章推荐
- css3 transition 动画基础
- css3 transition 动画基础
- Css3 Transition动画效果
- css3 webkit实验的动画效果:-webkit-transition
- CSS3 transition实现超酷图片墙动画效果
- CSS3 Transform 变形(transform)、转换(transition)和动画(animation)
- css3动画-transition
- css3动画基础
- css3动画(transition)属性探讨
- CSS3实践之路(三):CSS3的转换效果(transition)与动画(animation)
- CSS3(transform/transition/animation) 基础 总结
- CSS3 transition实现超酷图片墙动画效果
- CSS3transition实现的简单动画菜单
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画模块transform transition animation属性解释
- WebKit CSS3 动画基础
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- 利用css3属性:transition-duration来做简单的动画
- CSS3中和动画有关的属性transform、transition 和 animation
- css3 动画(animation)、渐变(transition)和改变(transform)整理