css3动画之@keyframes关键帧

css3新增属性@keyframes（关键帧），可以帮助开发者不必依赖JavaScript，只使用css代码完成动画制作。@keyframes创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样式，在动画过程中，可以多次改变这套 CSS 样式，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。注意，@keyframes的兼容性如下：目前浏览器都不支持 @keyframes 规则Firefox 支持替代的 @-moz-keyframes 规则Opera 支持替代的 @-o-keyframes 规则Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则

2、在一个动画中改变多个 CSS 样式例子：css部分：.div1{ position: relative; width:100px; height:100px; color:#fff; background: darkslategray; animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst{ 0%{ left:0px; top: 0px; } 100%{ left:300px; top:400px; } }html部分：<div class="div1">keyframes动画示例</div>效果如图：