search

Home  >  Article  >  Web Front-end  >  CSS animated fill mode property

CSS animated fill mode property

WBOY
WBOYforward
2023-09-03 08:09:101209browse

CSS 动画填充模式属性

Use the animation-fill-mode attribute to set the style of the element when the animation is not playing.

You can try running the following code to implement the animation-fill-mode attribute

Example

Live demonstration

<!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>

The above is the detailed content of CSS animated fill mode property. For more information, please follow other related articles on the PHP Chinese website!

css animation
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Set outline color using CSSNext article：Set outline color using CSS

Related articles

See more