Css3用animation和keyframes实现动画
1、定义运动规则 keyframes关键帧 name名字
2、定义运动规则 keyframes关键帧 run名字 from 从什么时候开始 to 到什么时候结束
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #jrt{ width: 400px; height: 300px; background: blue; /*animation 动画片制作 run 移动*/ /*animation: run 3s;*/ /*linear是匀速 0.5s延迟时间 循环次数3 后面改成infinite就是无限次循环*/ /*参数：要绑定的运动名称，运动持续时间 ,运动曲线,延迟时间,重复次数,是否轮流反向播放动画*/ /*animation: run 3s linear 0.5s 3;*/ animation: run 3s infinite; } /*定义运动规则 keyframes关键帧 name名字*/ /*@keyframes name{ }*/ /*定义运动规则 keyframes关键帧 run名字 from 从什么时候开始 to 到什么时候结束*/ /* @keyframes run{ from{ width: 300px; height: 150px; } to{ width: 900px; height: 500px; } }*/ /*也可以用百分比来表示 这个50% 是上面时间3s的50%*/ @keyframes run{ 0%{ width: 300px; } 50%{ width: 900px; } 100%{ width: 300px; } } </style> </head> <body> <div id="jrt"> </div> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知