PHP前端开发

使用 CSS 设置动画完成一个周期所需的时间

百变鹏仔 3个月前 (09-19) #CSS
文章标签 所需

使用animation-duration属性来设置动画完成一个循环所需的时间:

示例

在线演示

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