transition-delay - HTML CSS CSS Property

HTML CSS examples for CSS Property:transition-delay

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transition-delay

Description

The transition-delay CSS property defines when the transition will start in seconds (s) or milliseconds (ms).

The following table summarizes the transition-delay Property.

Item Value
Default value: 0s
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


transition-delay:     time | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
timenumber of seconds (s) or milliseconds (ms) to wait before the transition will start. The default value is 0s.
initial Sets this property to its default value.
inherit take the value of its parent element transition-delay property.

The example below shows the transition-delay property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transition-delay Property</title>
  <style type="text/css">
    div {<!--from  www.  ja v a 2  s . c  om-->
        width: 100px;
    height: 100px;
    background: #56cb50;
        border: 3px solid #277423;
    /* For Safari 3.0+ */
    -webkit-transition-property: width;
    -webkit-transition-duration: 4s;
    -webkit-transition-delay: 2s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
  }
  div:hover {
    width: 400px;
  }
</style>
 </head>
 <body>
  <div></div>
  <p><strong>Note:</strong> Place mouse pointer over the div box.</p>
 </body>
</html>

Related Tutorials