search

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

Set whether the animation plays forward or use CSS

WBOY
WBOYforward
2023-09-20 18:53:02699browse

设置动画是向前播放还是使用 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

Related articles

See more