标签：css3 rom 样式 key osi yellow 时间 round class
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
动画执行完毕之后会变为原始样式。
实例：一个沿正方形轨迹移动的<div>
div{ width: 100px; height: 100px; background: red; animation: ani1 5s; -webkit-animation: ani1 5s; -moz-animation: ani1 5s; -o-animation: ani1 5s; position: absolute; } @keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;} } //Safari and Chrome @-webkit-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;} } //Firefox @-moz-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;} } //Opera @-o-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;} }
标签：css3 rom 样式 key osi yellow 时间 round class
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/6863222.html
