回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes go{ from{ width:200px; } to{ width:500px } } .demo{ width:100px; height:100px; background: #000; animation:go 2s ease-in 3s infinite;/*动画反向播放*/ } .demo-1{ width:100px; height:100px; background: #000; animation:go 2s ease-in 3s infinite reverse;/*动画反向播放*/ } .demo-2{ width:100px; height:100px; background: #000; animation:go 2s ease-in 3s infinite alternate;/*动画偶数反向播放*/ } </style> </head> <body> <h2>正常播放顺序</h2> <div class="demo"></div> <h2>反向播放顺序</h2> <div class="demo-1"></div> <h2>奇数正向播放偶数次反向播放</h2> <div class="demo-2"></div> </body> </html>
运行结果