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.animationanimation: 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 规定动画应该无限次播放。
👁️ 阅读量：0
© 版权声明：本文《css3 动画animation 及@keyframes 规则》内容均为本站精心整理或网友自愿分享，如需转载请注明原文出处：https://www.zastudy.cn/wen/1686971550a411652.html。