La propiedad de animación de estilo permite animar las transiciones de un estilo CSS a otro estilo CSS. Configura el tiempo, el retraso, la duración y otros detalles de cómo debe progresar la secuencia de animación. La animación contiene dos componentes, uno es CSS que describe el componente y otro es un conjunto de fotogramas clave que indican los estados inicial y final de los estilos.
Sintaxis:
- Se utiliza para devolver la propiedad de animación.
object.style.animation
- Se utiliza para establecer la propiedad de animación.
object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState"
Valores de propiedad
- animationName: describe el nombre del fotograma clave adjunto al selector.
- animationDuration: Describe el tiempo que dura una animación.
- animationTimingFunction: Describe la velocidad de la animación.
- animationDelay: describe el retraso antes de que comience la animación.
- animationIterationCount: Describe el número de veces que se lleva a cabo una animación.
- animationDirection: describe si la animación debe reproducirse al revés en ciclos alternos.
- animationFillMode: describe qué valores aplicar cuando finaliza la animación.
- animationPlayState: describe si una animación se está ejecutando o está en pausa.
Valores de retorno: Devuelve un valor de string que representa la propiedad de animación de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
width: 90px;
height: 90px;
background: green;
color: white;
position: relative;
text-align: center;
/* -webkit- is used for safari browser */
-webkit-animation: GFG_Move_1 1s infinite;
animation: GFG_Move_1 1s infinite;
}
/* For Opera, Chrome and Safari browser */
@-webkit-keyframes GFG_Move_1 {
from {left: 250px;}
to {left: 500px;}
}
/* For Opera, Chrome and Safari browser */
@-webkit-keyframes GFG_Move_2 {
from {left: 350px;top: 0px;}
to {left: 350px;top: 200px;}
}
@keyframes GFG_Move_1 {
from {left: 250px;}
to {left: 500px;}
}
@keyframes GFG_Move_2 {
from {left: 350px;top: 0px;}
to {left: 350px;top: 200px;}
}
</style>
</head>
<body align="center">
<button onclick = "myGeeks()">
Change Animation
</button>
<p>
Click on button to change the animation.
</p>
<script>
function myGeeks() {
/* This code run on safari browser */
document.getElementById("GFG").style.WebkitAnimation
= "GFG_Move_2 4s 2";
document.getElementById("GFG").style.animation
= "GFG_Move_2 4s 2";
}
</script>
<div id="GFG">GFG</div>
</body>
</html>
Producción:
- Antes de hacer clic en el botón: el div se mueve horizontalmente
- Después de hacer clic en el botón: el div se mueve verticalmente
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style animation Property
</title>
<style>
#GFG {
width: 90px;
height: 90px;
background: green;
position: relative;
color: white;
text-align: center;
/* /* For Opera, Chrome, Safari*/ */
-webkit-animation: GFG_Move_1 1s infinite;
animation: GFG_Move_1 1s infinite;
}
/* For Opera, Chrome, Safari*/
@-webkit-keyframes GFG_Move_1 {
from {
left: 0px;
}
to {
left: 90px;
}
}
/* For Opera, Chrome, Safari */
@-webkit-keyframes GFG_Move_2 {
from {
top: 0px;
background: green;
width: 100px;
}
to {
top: 200px;
background: yellow;
width: 150px;
height: 150px;
}
}
@keyframes GFG_Move_1 {
from {
left: 0px;
}
to {
left: 95px;
}
}
@keyframes GFG_Move_2 {
from {
top: 0px;
background: green;
width: 100px;
}
to {
top: 200px;
background: yellow;
width: 150px;
height: 150px;
}
}
</style>
</head>
<body align="center">
<button onclick="myGeeks()">
Change Animation
</button>
<p>
Click on button to change the animation.
</p>
<script>
function myGeeks() {
/* For Opera, Chrome, Safari */
document.getElementById("GFG").style.WebkitAnimation
= "GFG_Move_2 4s 2"
document.getElementById("GFG").style.animation
= "GFG_Move_2 4s 2";
}
</script>
<div id = "GFG">GFG</div>
</body>
</html>
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de animación de estilo se enumeran a continuación:
- Google Chrome 43.0, 4.0 -webkit-
- Internet Explorer 10.0
- Mozilla firefox 16.0, 5.0 -moz-
- Opera 30.0, 15.0 -webkit-, 12.1, 12.0 -o-
- Safari 9.0, 4.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA