PHP前端开发

CSS 动画填充模式属性

百变鹏仔 4个月前 (09-20) #CSS
文章标签 属性

使用animation-fill-mode属性设置动画未播放时元素的样式。

您可以尝试运行以下代码来实现animation-fill-mode属性

示例

现场演示

<!DOCTYPE html><html>   <head>      <style>         div {            width: 150px;            height: 200px;            position: relative;            background: red;            animation-name: myanim;            animation-duration: 2s;            animation-fill-mode: backwards;         }         @keyframes myanim {            from {left: 0px; background-color: green;}            to {left: 200px; background-color: blue;}         }      </style>   </head>   <body>      <div></div>   </body></html>