La propiedad animationName en HTML DOM se usa para establecer o devolver un nombre para la animación @keyframes .
Sintaxis:
- Se utiliza para establecer la propiedad animationName:
object.style.animationName = "none|keyframename|initial|inherit"
- Se utiliza para devolver la propiedad animationName:
object.style.animationName
Valor de la Propiedad: Contiene el nombre de la animación.
- none: Cuando la animación es none. este es el valor predeterminado.
- keyframename: Nombre del fotograma clave para vincular al selector.
- inicial: se utiliza para establecer el valor predeterminado.
- heredado: se utiliza para heredar la propiedad del padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM animationName Property
</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* For Chrome, Safari, Opera*/
animation: move_1 2s infinite;
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_1 {
from {
left: 150px;
}
to {
left: 350px;
}
}
@keyframes move_1 {
from {
left: 150px;
}
to {
left: 350px;
}
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_2 {
from {
left: 270px;
width: 0px;
height: 0px;
}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;
}
}
@keyframes move_2 {
from {
left: 270px;
width: 0px;
height: 0px;
}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;
}
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM animationName Property</h2>
<button onclick="Geeks()">
Click Here
</button>
<br>
<br>
<div id="GFG_DIV"></div>
<script>
function Geeks() {
// Changing the animation name.
document.getElementById(
"GFG_DIV").style.WebkitAnimationName =
"move_2";
// for Chrome, Safari, and Opera
document.getElementById(
"GFG_DIV").style.animationName =
"move_2";
}
</script>
</body>
</html>
Producción
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Finalmente:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM animationName Property
</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* For Chrome, Safari, Opera*/
animation: move_1 2s infinite;
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_1 {
from {
left: 150px;
}
to {
left: 350px;
}
}
@keyframes move_1 {
from {
left: 150px;
}
to {
left: 350px;
}
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_2 {
from {
left: 270px;
width: 0px;
}
to {
left: 270px;
width: 100px;
background: blue;
}
}
@keyframes move_2 {
from {
left: 270px;
width: 0px;
}
to {
left: 270px;
width: 100px;
background: blue;
}
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM animationName Property</h2>
<button onclick="Geeks()">
Click Here
</button>
<br>
<br>
<div id="GFG_DIV"></div>
<script>
function Geeks() {
// Changing the animation name.
document.getElementById(
"GFG_DIV").style.WebkitAnimationName =
"move_2";
// for Chrome, Safari, and Opera
document.getElementById(
"GFG_DIV").style.animationName = "move_2";
}
</script>
</body>
</html>
Producción
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Finalmente:
Navegadores compatibles:
- Google Chrome: 43.0, 4.0 Webkit
- Mozilla Firefox: 16.0, 5.0 meses
- Borde: 10.0
- Opera: 30.0, 15.0 webkit
- Safari: kit web 4.0
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA