Crea tu Web: Indice de diseño

Aplicar las animaciones

Una vez definida la animación con la regla @keyframe podemos usarla aplicándolo a las estilos de los elementos que queremos animar. Esto lo hacemos mediante la regla animation en su versión corta o desglosada en partes. Lo mejor: un ejemplo comentado

@keyframes rotar
{
from {transform:rotateZ(0deg)}
to {transform:rotateZ(360deg)}
}

Hemos definido la animación para hacer un giro plano, alrededor del eje Z (o sea como si viéramos un disco desde arriba o las manecillas del reloj). Ahora definimos un estilo para aplicar esta animación

#giro
{
animation: rotar 5s infinite;
}

Ahora aplico esto en un bloque div <div id="giro"> y obtenemos lo siguiente

·

Es fácil ¿verdad?, pero bueno hay que verlo con más detalle

Argumentos de animation

La propiedad animation relamente es una forma abreviada de varias propiedades, usadas para definir la duración, velocidad y otros aspectos de la animación. Son:

  • animation-name: nombre de la animacion (el definido con @keyframes)
  • animation-duration: Milisegundos que durará la animación
  • animation-delay: retraso para el comienzo de la animación (0 por defecto)
  • animation-iteration-count: número de repeticiones, infinite para bucle continuo
  • animation-timing-function: efectos de velocidad.
    • linear: igual velocidad en toda la animación
    • ease: inicio lento, avance rápido y dinal lento
    • ease-in: inicio lento
    • ease-out: final lento
    • ease-in-out: inicio y final lentos
    • cubic-bezier(n,n,n,n): las velocidades se definen mediante parámetros entre 0 y 1
  • animation-direction: dirección de la animación:
    • normal: de atrás adelante
    • alternate: de atrás adelante y luego de adelante atrás, alternando.
  • animation-play-state: útil para scripts, indica el estado de la animación: running o paused

Pues ya solo te queda experimentar para ver las posibilidades de esta potente propiedad de las reglas de estilo CSS3

 

 

arriba


Comunidad Virtual. Alojamiento gratis