search

Home >Web Front-end >CSS Tutorial >CSS animation delay property

CSS animation delay property

WBOY
WBOYforward
2023-08-28 11:21:06930browse

CSS 动画延迟属性

Use the animation-delay property to set the delay for the start of animation via CSS.

You can try running the following code to implement the animation-delay property -

Example

Live Demonstration

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

The above is the detailed content of CSS animation delay 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：Sets how many times the animation should run using CSSNext article：Sets how many times the animation should run using CSS

Related articles

See more