CSS常用样式 10.自定义动画 1)关键帧(keyframes) 被称为关键帧,其类似于Flash中的关键帧。 在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{ ...
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知识总结(九)
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。