CSS知识总结（九）

CSS常用样式

10.自定义动画

　　1） 关键帧 （ keyframes ）

　　　　被称为关键帧，其类似于Flash中的关键帧。

　　　　在CSS3中其主要以[@keyframes]开头，后面紧跟着是动画名称加上一对花括号[{…}]，括号中就是一些不同时间段样式规则。

　　　　语法： @keyframes animationname {keyframes-selector {css-styles;}}

　　　　 animationname： 定义动画的名称。

　　　　 keyframes-selector： 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。建议定义 百分比 选择器。

　　　　 css-styles： 通过 @keyframes 规则，您能够创建动画，就是将一套 CSS 样式逐渐变化为另一套样式，并且能够多次改变这套 CSS 样式。

　　　　兼容性：目前浏览器都不支持@keyframes规则，需要加上前缀"-moz-","-o-","-webkit-"。

　　　　例子：

 @-webkit-keyframes FromLeftToRight {    /*   Safari 和 Chrome   */  
    0% {left : 0 ;} 
    100%  { left : 800px ;}  
}
@-moz-keyframes FromLeftToRight {     /*   Firefox   */  
    0% {left : 0 ;} 
    100%  { left : 800px ;}  
}
@-o-keyframes FromLeftToRight {       /*   Opera   */  
    0% {left : 0 ;} 
    100%  { left : 800px ;}  
}
@keyframes FromLeftToRight {  
    0% {left : 0 ;} 
    100%  { left : 800px ;}  
}  

查看更多关于CSS知识总结（九）的详细内容...