css3 动画animation 及@keyframes 规则

百科大全

更新时间：2025-10-05 10:27:1544

admin管理员组
文章数量:1794759

css3 动画animation 及@keyframes 规则

1.keyframes

@keyframes就相当于动画中的关键帧，你需要设置每一帧. 使用@keyframe时，我们需要搭配属性animation一块使用，然后使用animation-name关联起来。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p> <div></div> </body> </html> 2.animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

//示例使用 boxW 方法，div会在5秒内从100px 变为 200px div { animation: boxW 5s infinite; }

这里重点说下第三个属性 animation-iteration-count n 定义动画播放次数的数值。 infinite 规定动画应该无限次播放。

本文标签：规则动画 keyframes animation

版权声明：本文标题：css3 动画animation 及@keyframes 规则内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971325a123912.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。