Skip to content
Related Articles

Related Articles

Improve Article

CSS | animation-direction Property

  • Difficulty Level : Basic
  • Last Updated : 06 Aug, 2019

The animation-direction property in CSS is used to define the direction of the animation. The direction of animation should be forwards, backward or in alternate cycles.

Syntax:

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

Property Value: The animation-direction property are listed below:
normal: This animation property play the animation forward. It is the default value.

  • Syntax:
    animation-direction: normal; 
  • Example:




    <!DOCTYPE html> 
    <html
        <head
            <title>
                CSS | animation-direction Property
            </title>
            <style
                body {
                    text-align:center;
                }
                h1 {
                    color:green;
                }
                h3 { 
                    width: 100%; 
                    animation-name: text; 
                    animation-duration: 2s; 
                    animation-iteration-count: infinite; 
                
                #one { 
                    animation-direction: normal; 
                
                @keyframes text { 
                    from { 
                        margin-left: 60%; 
                    
                    to { 
                        margin-left: 0%; 
                    
                
            </style
        </head
        <body
            <h1>GeeksforGeeks</h1
            <h2>animation-direction property</h2
            <h3 id="one">This text is normal.</h3
        </body
    </html>                                     
  • Output:

reverse: This animation property play the animation in the reverse direction.

  • Syntax:
    animation-direction: reverse;
  • Example:




    <!DOCTYPE html> 
    <html
        <head
            <title>
                CSS | animation-direction Property
            </title>
            <style
                body {
                    text-align:center;
                }
                h1 {
                    color:green;
                }
                h3 { 
                    width: 100%; 
                    animation-name: text; 
                    animation-duration: 2s; 
                    animation-iteration-count: infinite; 
                
                #one { 
                    animation-direction: reverse; 
                
                @keyframes text { 
                    from { 
                        margin-left: 60%; 
                    
                    to { 
                        margin-left: 0%; 
                    
                
            </style
        </head
        <body
            <h1>GeeksforGeeks</h1
            <h2>animation-direction property</h2
            <h3 id="one">This text is reverse.</h3
        </body
    </html>                                     
  • Output:

alternate: This animation property plays the animation forwards first, and then backward.

  • Syntax:
    animation-direction: alternate; 
  • Example:




    <!DOCTYPE html> 
    <html
        <head
            <title>
                CSS | animation-direction Property
            </title>
            <style
                body {
                    text-align:center;
                }
                h1 {
                    color:green;
                }
                h3 { 
                    width: 100%; 
                    animation-name: text; 
                    animation-duration: 2s; 
                    animation-iteration-count: infinite; 
                
                #one { 
                    animation-direction: alternate; 
                
                @keyframes text { 
                    from { 
                        margin-left: 60%; 
                    
                    to { 
                        margin-left: 0%; 
                    
                
            </style
        </head
        <body
            <h1>GeeksforGeeks</h1
            <h2>animation-direction property</h2
            <h3 id="one">This text is alternate.</h3
        </body
    </html>                                     
  • Output:

alternate-reverse: This animation property play animation backwards first, and then forwards.

  • Syntax:
    animation-direction: alternate-reverse;
  • Example:




    <!DOCTYPE html> 
    <html
        <head
            <title>
                CSS | animation-direction Property
            </title>
            <style
                body {
                    text-align:center;
                }
                h1 {
                    color:green;
                }
                h3 { 
                    width: 100%; 
                    animation-name: text; 
                    animation-duration: 2s; 
                    animation-iteration-count: infinite; 
                
                #one { 
                    animation-direction: alternate-reverse;
                
                @keyframes text { 
                    from { 
                        margin-left: 60%; 
                    
                    to { 
                        margin-left: 0%; 
                    
                
            </style
        </head
        <body
            <h1>GeeksforGeeks</h1
            <h2>animation-direction property</h2
            <h3 id="one">This text is alternate-reverse.</h3
        </body
    </html>                                     
  • Output:

initial: This property is used to set the animation property to its default value.

inherit: This property is used to inherits the animation property from its parent element.

Supported Browser: The browser supported by animation-direction property are listed below:

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 30.0
  • Safari 9.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :