 |
Animaciones (sintaxis básica)
Las animaciones en css3 nos permiten hacer cosas que con las transiciones no alcanzamos y nos quedamos cortos. Una animación permite que un elemento cambie gradualmente de un estilo a otro, se pueden cambiar tantas propiedades CSS como desee, tantas veces como desee.
Para utilizar la animación CSS, primero debe especificar algunos fotogramas clave para la animación. Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos. CSS permite la animación de elementos HTML sin utilizar JavaScript o Flash.
En este capítulo, aprenderá sobre las siguientes propiedades:
- @keyframes La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación.
- animation-name La propiedad CSS animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un @keyframes esta regla define los valores de las propiedades de la secuencia de animación.
- animation-duration La propiedad CSS animation-duration indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).
- animation-delay La propiedad CSS animation-delay especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.
- animation-iteration-count La propiedad CSS animation-iteration-count define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.
- animation-direction La propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
- animation-timing-function La propiedad CSS animation-timing-function especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias
. - animation-fill-mode La propiedad CSS animation-fill-mode especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.
- animation La propiedad animation de CSS es una propiedad abreviada (shorthand property) para animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count y animation-direction.
Nota: Todas estas propiedades de animación no son compatibles con Internet Explorer 9 y versiones anteriores.
<html>
<head>
<style>
.op1 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 10s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="op1"></div>
<p><b>Nota:</b> Cuando termina una animación, vuelve a cambiar a su estilo original.</p>
</body>
</html>
Nota: Cuando termina una animación, vuelve a cambiar a su estilo original.
Nota: La propiedad animation-duration define cuánto tiempo debe tardar una animación en completarse. Si animation-durationno se especifica la propiedad, no se producirá ninguna animación, porque el valor predeterminado es 0 (0 segundos).
En el ejemplo anterior, hemos especificado cuándo cambiará el estilo utilizando las palabras clave "desde" y "hasta" (que representa 0% (inicio) y 100% (completo)).
También es posible utilizar el porcentaje. Al usar el porcentaje, puede agregar tantos cambios de estilo como desee.
El siguiente ejemplo cambiará el color de fondo del elemento cuando la animación esté completa al 25%, al 50% y nuevamente cuando la animación esté completa al 100%:
<html>
<head>
<style>
.op2 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 10s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div class="op2"></div>
</body>
</html>
El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento <div> cuando la animación esté completa al 25%, al 50% y nuevamente cuando la animación esté completa al 100%:
<html>
<head>
<style>
.op3 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example1;
animation-duration: 10s;
} @keyframes example1 {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:200px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
</style>
</head>
<body> <div class="op3"></div>
</body>
</html>
La propiedad animation-delay especifica un retraso para el inicio de una animación, el valor de retardo de la animación se define en segundos (s) o milisegundos (ms). En el ejemplo se inicia la animación después de 2 segundos:
<html>
<head>
<style>
.op4 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: mymove1;
animation-delay: 2s;
animation-duration: 10s;
} @keyframes mymove1 {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body> <div class="op4"></div>
</body>
</html>
La propiedad animation-iteration-count especifica el número de veces que se debe reproducir una animación.
- numero Un número que define cuántas veces se debe reproducir una animación. El valor predeterminado es 1
- infinite Especifica que la animación debe reproducirse infinitas veces (para siempre)
<html>
<head>
<style>
.op3 {
width: 100px;
height: 100px;
background-color: red;
animation: mymove 3s;
animation-iteration-count: infinite;
} @keyframes example1 {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body> <div class="op3"></div>
</body>
</html>
Reproduce la animación para siempre: