InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS animation

  • animation overview
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • animation shorthand
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties
  • > CSS Animation

CSS animation-direction

on Mar 24, 2016

CSS animation-animation-direction property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.

In case animation-name has multiple values, animation-direction can also have multiple values.

CSS property animation-direction

CSS version: CSS 3
Value: [normal | reverse | alternate | alternate-reverse] [, ...]*
Initial: normal
Applies to: all elements, ::before and ::after pseudo-elements
Inherited: no

animation-direction values

normalAll iterations of the animation are played as specified
reversePlay animationiterations in reverse direction
alternateOdd counts in normal direction, even count in reverse direction.
alternate-reverseOdd counts in reverse direction, even count in normal direction.

Example – animation-direction

In the following code, CSS property animation-direction can be changed to the following values
  • normal
  • reverse
  • alternate
  • alternate-reverse
<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-direction: normal;
}
</style>

<div class=box>Object</div>
animation-direction refresh done
try it online

Specification

  • W3C CSS 3 animation-direction specification

Suggested posts:

  1. CSS animation-timing-function
  2. CSS animation-iteration-count
  3. CSS animation-delay
  4. CSS animation-fill-mode
  5. CSS animation-name
  6. CSS animation-play-state
  7. CSS animation-duration
  8. CSS3 animation overview
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS Animation, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress