CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
@keyframes 定义动画关键帧:
@keyframes animateName { 0% { 状态 } 100% { 状态 } } @keyframes animateName { from { 状态 } to { 状态 } }
动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。
from和to等同于0%和100%;0%表示动画的开始;100%表示动画的结束;
@keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes;
当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长(默认为0)
例如:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes tabList { 0% { 50px; height: 50px; } 50% { 100px; height: 100px; } 100% { 150px; height: 150px; } } @-webkit-keyframes tabList{ 0% { 50px; height: 50px; } 50% { 100px; height: 100px; } 100% { 150px; height: 150px; } } .tablist{ animation: tabList 3s; -webkit-animation: tabList 3s; background: red; 50px; height: 50px; } </style> </head> <body> <div class="tablist"></div> </body> </html>
当然对于状态的定义不局限于开始和结束两个时间点,我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点,也可以写入10%,20%,30%...根据需求挑时间点动画。
CSS3 动画属性:
当我们使用@keyframes定义好了一个动画,它并不会执行产生任何效果,直到我们通过animation属性将动画应用到相应元素上。
对于 CSS3 animation 属性其完整的语法如下:
animation: name duration timing-function delay iteration-count direction;
- name是使用@keyframes定义好的关键帧名称
- duration从字面意思可知是指定动画持续时间
- timing-function 指定动画以何种方式播放,具体指的是从元素的一个状态过渡到另一个状态所使用的方式,可用的值有linear,ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
- delay指定动画何时开始,默认为0;
- iteration-count 指定动画重复次数,可以指定一个数字,也可以使用'infinite'表示一直播放。默认为1.
- direction指定动画是否反向播放或者交替着播放,可用的值有normal, reverse, alternate, alternate-reverse
另外还有一个属性非常有用,一般在js中控制其属性。animation-play-state:paused/running;具体参考:http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state
其中name和duration 是必需的,如果不指定duration默认为0,也就是动画持续0秒,所以就无法看到动画效果。
以上的例子.tablist使用@keyframes定义好的动画。
参考:
http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html