IT. Expert System.

CSS

animation-fill-mode


Property Description

The animation-fill-mode property specifies what styles apply for the element when the animation is not playing (finished, or during a "delay").

This property has the following syntax:

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

Property Values

Value Description
none (default) Specifies that the animation will not apply any styles to the target before or after it is executing
forwards Specifies that when the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
backwards Specifies that the animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse")
both Specifies that the animation will follow the rules for both forwards and backwards
initial Specifies that the value of the property should be set to the default value
inherit Specifies that the value of the property should be inherited from the parent element

Examples

This example shows the use of the animation-fill-mode property:

<style type="text/css">

div.animate {
  width:50px;
  height:50px;
  color:white;
  padding:2px;
  background:blue;
  position:relative;
}

#test1 {
  animation-name:boxmove;
  animation-duration:5s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  /* Firefox */
  -moz-animation-name:boxmove;
  -moz-animation-duration:5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: none;
  /* Safari and Google Chrome */
  -webkit-animation-name:boxmove;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-fill-mode: none;
}

#test2 {
  animation-name:boxmove;
  animation-duration:5s;
  animation-iteration-count: 1;
  animation-fill-mode: forward;
  /* Firefox */
  -moz-animation-name:boxmove;
  -moz-animation-duration:5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: forward;
  /* Safari and Google Chrome */
  -webkit-animation-name:boxmove;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-fill-mode: forward;
}

@keyframes boxmove
{
  from {left:0px;}
  to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
  from {left:0px;}
  to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
  from {left:0px;}
  to {left:210px;}
}

</style>

animation-fill-mode: none;
<div id="test1" class="animate"></div><br/>

animation-fill-mode: forward;
<div id="test2" class="animate"></div>

This produces the following result:

animation-fill-mode: none;

animation-fill-mode: forward;

Explanation: Due to the 'none' setting in 'test1', the animation returns to the start. For 'test2', the animation stays where it ended due to the 'forward' setting.

Browser Support

Chrome Firefox IE Safari Opera
4.0 -webkit- 16.0
5.0 -moz-
10.0 4.0 -webkit- 12.1
12.0 -o-
15.0 -webkit-

Miscellaneous Information

Inherited: No
Defined In: CSS3
Default Value: none


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 339 / 158766237. Delta: 0.02236 с