CSS | Propiedad de nombre de animación

La propiedad animation-name se usa para especificar el nombre de los @keyframes que describen la animación.

Sintaxis:

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

Valor de la propiedad: el valor de la propiedad del nombre de la animación se enumera a continuación:

  • keyframename: esta propiedad se utiliza para especificar el nombre del fotograma clave que debe vincularse con el selector.
  • none: Es el valor por defecto. Se utiliza para especificar que no habrá animación.
  • initial: esta propiedad se utiliza para establecer esta propiedad en su valor predeterminado.
  • heredar: esta propiedad se utiliza para heredar esta propiedad de su elemento principal.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            CSS | animation-name Property
        </title>
        <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>                                                    

Producción:

Navegador compatible: los navegadores compatibles con la propiedad animation-name se enumeran a continuación:

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

Publicación traducida automáticamente

Artículo escrito por vt_m y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *