animation-delay - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-delay

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

Description

The animation-delay CSS property sets when the animation will start.

The value can be specified in seconds (s) or milliseconds (ms).

The following table summarizes the animation-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: 

animation-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 starting the animation. The default value is 0s.
initial Sets this property to its default value.
inherit take the value of its parent element animation-delay property.
The example below shows the animation-delay property.

Demo Code




ResultView the demo in separate window 
<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-delay Property</title>
  <style type="text/css">
.box {<!--from  w  w w  .  j a v a 2 s.  c  om-->
    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-delay: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
  <p><strong>Note:</strong> Click the "Show Output" button to repeat the animation.</p>
 </body>
</html>





Related Tutorials