animation-direction - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-direction

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

Description

The animation-direction CSS property sets whether the animation should play in reverse, on alternate cycles or not.

The following table summarizes the animation-direction Property.

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

Syntax

The syntax of the property is as follows: 


animation-direction:     normal | reverse | alternate | alternate-reverse | initial | inherit

The animation-direction property has no effect if the animation only play once.

Property Values

The following table describes the values of this property.

ValueDescription
normalplay forward in each cycle. This is default.
reverse play backward in each cycle.
alternate play forward in the first cycle, then play backward, then continues to alternate.
alternate-reverse play backward in the first cycle, then play forward, then continues to alternate.
initial Sets this property to its default value.
inherit take the value of its parent element animation-direction property.

The example below shows the animation-direction property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-direction Property</title>
  <style type="text/css">
.box {<!-- w ww .j  a  v  a2  s  .  co  m-->
    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-iteration-count: 2;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

/* 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