Tutorialspoint.dev

CSS | animation-name Property

The animation-name property is used to specify the name of the @keyframes describing the animation.

Syntax:

animation-name: keyframename|none|initial|inherit;

Property Value: The animation-name property value are listed below:

  • keyframename: This property is used to specify the name of the keyframe which need to bind with selector.
  • none: It is the default value. It is used to specify that there will be no animation.
  • initial: This property is used to set this property to its default value.
  • inherit: This property is used to inherits this property from its parent element.

Example:

<!DOCTYPE html> 
<html
    <head
        <style
            body {
                text-align:center;
                width:70%;
            }
            h1 {
                color:green;
            }
            div {
                width: 50px;
                height: 50px;
                background: green;
                position: relative;
                -webkit-animation: geeks 5s infinite;
                -webkit-animation-delay: 2s;
                animation: geeks 5s infinite;
                animation-delay: 2s;
            }
            @-webkit-keyframes geeks {
                from {
                    left: 0%;
                }
                to {
                    left: 80%;
                }
            }
            @keyframes geeks {
                from {
                    left: 0px;
                }
                to {
                    left: 80%;
                }
            
            #one { 
                animation-direction: alternate-reverse;; 
            
            @keyframes text { 
                from { 
                    margin-left: 60%; 
                
                to { 
                    margin-left: 0%; 
                
            
        </style
    </head
    <body
        <h1>GeeksforGeeks</h1
        <h2>animation-name property</h2
        <div class = "gfg"></div
    </body
</html>                                                    

Output:

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter