Las animaciones CSS3
animaciones CSS3 permite la animación de la mayoría de los elementos HTML sin necesidad de utilizar JavaScript o Flash!
Animación
Soporte del navegador para animaciones
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
¿Cuáles son CSS3 Animaciones?
Una animación permite a un elemento de cambiar gradualmente de un estilo a otro.
Se puede cambiar tantas propiedades CSS que desee, como muchas veces que desee.
Para utilizar la animación CSS3, primero debe especificar algunos fotogramas clave para la animación.
Los fotogramas clave mantener lo estilos el elemento tendrá en determinados momentos.
El @keyframes Regla
Cuando especifica los estilos CSS en el interior del @keyframes regla, la animación va a cambiar gradualmente desde el estilo actual al nuevo estilo en determinados momentos.
Para conseguir una animación para el trabajo, debe obligar a la animación a un elemento.
En el siguiente ejemplo se une el "ejemplo" animación a la <div> elemento. La voluntad de animación tiene una duración de 4 segundos, y que va a cambiar gradualmente el color de fondo de la <div> elemento de "rojo" a "amarilla":
Ejemplo
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Inténtalo tú mismo " Nota: Si la animation-duration no se especifica la propiedad, la animación no tendrá ningún efecto, ya que el valor por defecto es 0.
En el ejemplo anterior hemos especificado cuando el estilo va a cambiar mediante el uso de las palabras claves "from" y "to" (que representa el 0% (inicio) y 100% (completa)).
También es posible usar por ciento. Mediante el uso por ciento, se puede añadir tantos cambios en el estilo como desee.
En el siguiente ejemplo se cambia el color de fondo de la <div> elemento cuando la animación es de 25% de avance, el 50% de avance, y de nuevo cuando la animación es 100% completo:
Ejemplo
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Inténtalo tú mismo " El siguiente ejemplo va a cambiar tanto el color de fondo y la posición de la <div> elemento cuando la animación es de 25% de avance, el 50% de avance, y de nuevo cuando la animación es 100% completo:
Ejemplo
/* The animation code */
@keyframes example
{
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:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Inténtalo tú mismo " Retrasar una animación
La animation-delay propiedad especifica un retraso para el inicio de una animación.
El siguiente ejemplo tiene un retardo de 2 segundos antes de iniciar la animación:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Inténtalo tú mismo " Establecer cuántas veces una animación debe correr
La animation-iteration-count propiedad especifica el número de veces que una animación se debe ejecutar.
En el siguiente ejemplo se ejecutará la animación 3 veces antes de que se detenga:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Inténtalo tú mismo " En el siguiente ejemplo se utiliza el valor " infinite " para hacer la animación continuar para siempre;
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Inténtalo tú mismo " Ejecutar la animación en la dirección inversa o ciclos alternos
La animation-direction propiedad se utiliza para dejar una carrera de animación en la dirección inversa o ciclos alternos.
En el siguiente ejemplo se ejecutará la animación en sentido inverso:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Inténtalo tú mismo " En el siguiente ejemplo se utiliza el valor "alternate" para hacer la animación primera correr hacia adelante y luego hacia atrás, luego hacia delante:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Inténtalo tú mismo " Especificar la curva de velocidad de la animación
El animation-timing-function propiedad especifica la curva de velocidad de la animación.
La propiedad-tiempo-función de animación puede tener los siguientes valores:
-
ease- especifica una animación con un comienzo lento, luego rápido, entonces termina lentamente (esto es por defecto) -
linear- especifica una animación con la misma velocidad de principio a fin -
ease-in- especifica una animación con un comienzo lento -
ease-out- especifica una animación con un final lento -
ease-in-out- especifica una animación con un lento comienzo y el final -
cubic-bezier(n,n,n,n)- le permite definir sus propios valores de una función cúbica-Bezier
El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:
Ejemplo
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Inténtalo tú mismo " Animación taquigrafía Propiedad
El ejemplo siguiente utiliza seis de las propiedades de la animación:
Ejemplo
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Inténtalo tú mismo " El mismo efecto de animación como anteriormente se puede lograr mediante la abreviación animation propiedad:
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
Propiedades de animación CSS3
La siguiente tabla muestra la @keyframes regla y todas las propiedades de la animación:
| Propiedad | Descripción |
|---|---|
| @keyframes | Especifica el código de animación |
| animation | Una propiedad abreviada para establecer todas las propiedades de animación |
| animation-delay | Especifica un retraso para el inicio de una animación |
| animation-direction | Especifica si una animación debe jugar en dirección inversa o ciclos alternos |
| animation-duration | Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo |
| animation-fill-mode | Especifica un estilo para el elemento cuando la animación no se ejecuta (cuando esté terminado, o cuando se tiene un retraso) |
| animation-iteration-count | Especifica el número de veces que una animación se debe jugar |
| animation-name | Especifica el nombre de la animación @keyframes |
| animation-play-state | Especifica si la animación se está ejecutando o está en pausa |
| animation-timing-function | Especifica la curva de velocidad de la animación |