Home > Article > Web Front-end > Set whether the animation plays forward or use CSS

Set whether the animation plays forward or use CSS

WBOYforward: 2023-09-20 18:53:02641browse

设置动画是向前播放还是使用 CSS

Use the animation-direction property to set whether the animation plays forward, backward, or alternately loops:

Example

Real-time demonstration

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

The above is the detailed content of Set whether the animation plays forward or use CSS. 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：CSS Viewer Chrome extension, built for developersNext article：CSS Viewer Chrome extension, built for developers

See more

Set whether the animation plays forward or use CSS

Example

Related articles