CSS Properties: How to specify the number of seconds or milliseconds to wait before the transition effect will start

Last update on March 01 2024 13:09:50 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify the number of seconds or milliseconds to wait before the transition effect will start</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div {
    width: 100px; /* Sets the initial width of the div to 100 pixels */
    height: 100px; /* Sets the height of the div to 100 pixels */
    background: #00FFCC; /* Sets the background color of the div */
    -webkit-transition-property: width; /* Specifies the property to be transitioned for WebKit-based browsers */
    -webkit-transition-duration: 5s; /* Specifies the duration of the transition for WebKit-based browsers (5 seconds) */
    -webkit-transition-delay: 2s; /* Specifies the delay before the transition starts for WebKit-based browsers (2 seconds) */
    transition-property: width; /* Specifies the property to be transitioned */
    transition-duration: 5s; /* Specifies the duration of the transition (5 seconds) */
    transition-delay: 2s; /* Specifies the delay before the transition starts (2 seconds) */
}


div:hover {
    width: 200px; /* Sets the width of the div to 200 pixels when hovered over */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h1><strong>w3resource Tutorial</strong></h1><!-- Displays a level 1 heading with bold text "w3resource Tutorial" -->
<div id="div">Web Development Tutorial</div><!-- Creates a div element with the id "div" and content "Web Development Tutorial" -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to specify the number of seconds or milliseconds to wait before the transition effect starts.
The div initially has a width of 100 pixels and a height of 100 pixels, with a background color of #00FFCC.
The transition for the width property is specified to last for 5 seconds (transition-duration: 5s) and start after a delay of 2 seconds (transition-delay: 2s).
This transition applies both for WebKit-based browsers (-webkit-transition-duration and -webkit-transition-delay) and other browsers (transition-duration and transition-delay).
When the div is hovered over, its width is transitioned to 200 pixels as specified by div:hover.

Live Demo:

See the Pen transition-delay-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page