首页
CSS
CSS 动画
试用：使用 animation-direction 属性
运行 ❯
获取您的
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
转到 Spaces
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <h1>CSS Animation</h1> <p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p> <div></div> </body> </html>
