代码
提交代码
<!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 2s ;/*动画反向播放*/ } .demo-3{ width:100px; height:100px; background: #000; animation:go 2s ease-in 2s both; } </style> </head> <body> <h2>正常动画</h2> <div class="demo"></div> <h2>设置 both 注意观察开始和结束</h2> <div class="demo-3"></div> </body> </html>
运行结果