IT. Expert System.

CSS

animation-direction


Property Description

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

If the animation-direction value is "alternate", the animation will be played as normal every odd time (1,3,5,etc..) and backwards every even time (2,4,6,etc...).

Note: If the animation is set to play only once, this property will have no effect.

This property has the following syntax:

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

Property Values

Value Description
normal (default) Specifies that the animation should be played as normal
reverse Specifies that the animation should be played in reverse direction
alternate Specifies that the animation should be played in normal direction on odd cycles, and reverse direction on even cycles
alternate-reverse Specifies that the animation should be played in reverse direction on odd cycles, and normal direction on even cycles
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 two animations with different directions:

<style type="text/css">

div.testnormal
{
  width:50px;
  height:50px;
  background:blue;
  position:relative;
  animation:boxmove 5s infinite;
  animation-direction:normal;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-direction:normal;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-direction:normal;
}

div.testalternate
{
  width:50px;
  height:50px;
  background:green;
  position:relative;
  animation:boxmove 5s infinite;
  animation-direction:alternate;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-direction:alternate;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-direction:alternate;
}

@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>
<div class="testnormal"></div>
<br/>
<div class="testalternate"></div>
</div>

This produces the following result:



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: normal


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: 209 / 158765879. Delta: 0.02934 с