要使用animation动画，先要熟悉一下keyfr am es,Keyframes的语法规则:命名是由 ]@keyframes ]开头，后面紧接着是这个[动画的名称]加上一对花括号[{}]，括号中就是一些不同时间段样式规则。不同关键帧是通过 From （相当于0%）、to（相当于100%）或百分比来表示（为了得到最佳的浏览器支持，建议使用百分比），如下定义一个 简单 的动画：
CSS Code 复制内容到剪贴板
@keyframes&nbs p; my First /*定义动画名*/ { 0% { background : red ; left : 0px ; top : 0px ;} /*定义起始帧样式，0%可以换成f rom */ 25% { background : yellow ; left : 200px ; top : 0px ;} 50% { background : blue ; left : 200px ; top : 200px ;} 75% { background : green ; left : 0px ; top : 200px ;} 100% { background : red ; left : 0px ; top : 0px ;} /*定义结束帧样式，100%可以换成to*/ }
@keyframes定义好了，要使其能发挥效果，必须通过animation把它绑定到一个选择器，否则动画不会有任何效果。下面列出了animation的属性：
下面设置上述的所有属性
CSS Code 复制内容到剪贴板
animation-name:myfirst; animation-duration:5s; animation -t iming-function:linear; animation-delay:1s; animation -i teration-count:infin IT e; animation- direction :alternate; animation- play - stat e:running;
上述所有代码可以如下简写：
CSS Code 复制内容到剪贴板
animation:myfirst 5s linear 2s infinite alternate; animation-play -s tate:running;
浏览器兼容性
internet E xp lorer 10、Firefox 以及 opera 支持 @keyframes 规则和 animation 属性。
C hr ome 和 Safari 需要前缀 - webkit -。
注意： Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
下面给出上面介绍的关于keyframes和animation属性的完整代码示例：
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > animation演示 </ title > < style > div { width:100px; h ei ght:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:1s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:1s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } @keyframes ;m yfirst /*定义动画名*/ { 0% {background:red; left:0px; top:0px;} /*定义起始帧样式，0%相当于from*/ 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%相当于to*/ } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </ style > </ head > < body > < p > 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。 </ p > < div > </ div > </ body > </ html >
上面代码演示了一个正方形沿着一个正方形轨迹运动，基数次按正 方向 运动，偶数次按反方向运动，运动 过程中 还带有颜色变化。具体效果，读者可以自行运行代码观察。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3中Animation动画属性用法详解 全部内容，希望文章能够帮你解决 CSS3中Animation动画属性用法详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3中Animation动画属性用法详解的详细内容...