CSS3 - Transition - 说中
css属性值在一定时间内平滑地过渡;
transition主要包含四个属性值:
transition-property
执行变换的属性;应用所有属性用all;
transition-duration
动画持续的时间;注意要加单位s或者ms
transition-timing-function
在延续时间段,变换的速率变化;包括:
ease:默认项,动画效果慢慢开始然后加速,到中点后再减速最后缓慢到达终点
ease-in-out:与ease类似,加减速更柔和一些
ease-in:开始比较慢,但是加速和停止曲线比较陡峭
ease-out:开始较快,然后缓慢停止
linear:线性平均速率,通常在color和opacity属性的变化上
cubic-bezier函数:自定义速度模式 可以使用工具:http://cubic-bezier.com/#.17,.67,.83,.67
transition-delay
变换延迟时间;delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。
transition需要事件触发,所以没法在网页加载时自动发生。
例:
简写:
img{ transition: 1s 1s height ease; -webkit-transition: 1s 1s height ease; }
单独写:
img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-function: ease; }
transition的高级写法:
p#animate { width: 10em; background-color: #F00; border-radius: 5px; transition-property: width, border-radius, background-color; transition-duration: 1s, 2s; transition-timing-function: ease, ease-out, linear; } p#animate:hover { width: 20em; background-color: #00F; border-radius: 50%; }
注意其中的transition-duration只写了两个,那么第三个transition-property属性background-color就用循环到第一个,也就是说他的transition-duration值是1s;
注意要写transition的兼容写法:
p { -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }
用CSS3 Transition制作的效果: http://leaverou.github.io/animatable/
参考资料:
http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/
http://www.w3cplus.com/content/css3-transform
http://beiyuu.com/css3-animation/
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html