Home >Web Front-end >CSS Tutorial >How to delay transition effects using CSS

How to delay transition effects using CSS

PHPzforward: 2023-09-01 13:13:021531browse

Use the transition-delay property of CSS to delay the transition effect. You can try running the following code to set a 1 second transition delay:

Example

Online Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 3s;
            transition-delay: 1s;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Hover over the below box to change its width. It begins with a delay of 1 second.</p>
      <div></div>
   </body>
</html>

The above is the detailed content of How to delay transition effects using CSS. For more information, please follow other related articles on the PHP Chinese website!

css transition

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Fixed position using CSSNext article：Fixed position using CSS

See more

How to delay transition effects using CSS

Example

Related articles