animation-fill-mode - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-fill-mode

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. animation-fill-mode

Description

The animation-fill-mode CSS property sets how to apply styles to its target before and after the animation.

The following table summarizes the animation-fill-mode Property.

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

Syntax

The syntax of the property is as follows: 


animation-fill-mode:     none | forwards | backwards | both | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
none Do Not apply any styles to the target before or after it is executing.
forwards After the animation ends, the animation will apply the property values.
backwards The animation will apply style defined in the keyframe during the period defined by animation-delay property.
both The animation will follow the rules for both forwards and backwards.
initial Sets this property to its default value.
inherit take the value of its parent element animation-fill-mode property.

The example below shows the animation-fill-mode property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-fill-mode Property</title>
  <style type="text/css">
.box {<!--from  w ww .java  2s  .com-->

    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-fill-mode: forwards;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

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