PHP前端开发

如何使用 CSS 设置动画的填充模式

百变鹏仔 4周前 (09-20) #CSS
文章标签 如何使用

要使用CSS设置动画的填充模式,请使用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: forwards;         }         @keyframes myanim {            from {left: 0px; background-color: green;}            to {left: 200px; background-color: blue;}         }      </style>   </head>   <body>      <div></div>   </body></html>