La propiedad animation-play-state se usa para especificar si la animación se está ejecutando o está en pausa.
Sintaxis:
animation-play-state: paused|running|initial|inherit;
Valor de propiedad: la propiedad animation-play-state se enumera a continuación:
- pausado: esta propiedad se usa para especificar que la animación está en pausa.
- en ejecución: Es el valor por defecto. Esta propiedad se utiliza para especificar que la animación se está ejecutando.
- initial: esta propiedad se utiliza para establecer su valor predeterminado.
- heredar: se utiliza para heredar la propiedad de animación de su padre.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> CSS | animation-play-state Property </title> <style> body { text-align:center; width:70%; } h1 { color:green; } .gfg { width: 50px; height: 50px; background: green; position: relative; -webkit-animation: mymove 10s; -webkit-animation-play-state: play; animation: mymove 5s; animation-play-state: play; } .geeks { width: 50px; height: 50px; background: green; position: relative; -webkit-animation: mymove 10s; -webkit-animation-play-state: paused; animation: mymove 5s; animation-play-state: paused; } @-webkit-keyframes mymove { from { left: 0%; } to { left: 80%; } } @keyframes mymove { from { left: 0%; } to { left: 80%; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>animation-play-state property</h2> <div class = "gfg"></div><br> <div class = "geeks"></div> </body> </html>
Producción:
Navegador compatible: los navegadores compatibles con la propiedad animation-play-state se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0