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