2

Cómo crear animaciones con CSS3

839Puntos

hace 8 años

Cuando diseñas y creas una web desde cero, tienes todo tipo de ideas; algunas maravillosas y otras no tanto. Una excelente idea es usar animaciones basándonos en CSS3. Una mala idea definitivamente es utilizar Flash para hacer un sitio animado o que tenga una animación. Y ni hablar de agregar GIFs animados, o ¿acaso no recuerdas la famosa página de Homero Simpson?.

La idea principal de este artículo es iniciarte en el mundo de la animación utilizando CSS3. Para lograrlo haré algunos ejemplos básicos, que espero te animen a convertirte en un maestro de la animación en CSS3.

¡Empecemos!

Las animaciones en CSS3 permiten darle movimiento a cualquier elemento en pantalla, permitiéndote crear loops o efectos de transición que harán que tu web se vea bastante elegante. Las animaciones se logran gracias a la función “animation” y sus subpropiedades. Estas últimas nos dan la posibilidad de configurar la duración, el ritmo y otras características.

Subpropiedades de animation:

  • animation-delay: Es el tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
  • animation-direction: Nos indica si la animación se ve obligada a retroceder hasta el fotograma de inicio cuando se finalice la secuencia, o si debe comenzar desde el principio al llegar al final.
  • animation-iteration-count: El número de iteraciones (Repeticiones) de nuestra animación.
  • animation-name: Especifica el nombre de la regla @keyframes.
  • animation-duration: Cuánto tiempo abarca (duración) nuestra animación.
  • animation-fill-mode: Cuáles serán los valores de nuestras propiedades cuando se finaliza la animación.
  • animation-timing-function: Indica el ritmo de la animación. Es decir, cómo se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
  • animation-play-state: Pausa o reanuda nuestra animación.

Ahora hablaremos de los Keyframes. Cuando especificamos un código CSS dentro de la propiedad keyframe, la animación empezará a cambiar gradualmente; desde un estilo CSS inicial (0%) a el estilo con el que quieras finalizar (100%) .

Ejemplo de cómo se vería un Keyframe en código:
@keyframes MiAnimacion { from {background-color: white;} to {background-color: red;} } Estas líneas de código le dirán a mi elemento que inicie de color blanco y luego cambie a rojo. Así, al utilizar las subpropiedades de animation, le podré decir qué tiempo deberá tomar para hacer la transición. ¡Vamos a hacer el primer ejemplo de animación! En el siguiente ejemplo utilizaré los CSS en la misma hoja donde tendré mi código html, con el fin de que sea más fácil de apreciar (se recomienda siempre utilizar una hoja de estilos aparte).  Además agregaré –moz- y -webkit- antecediendo las subpropiedades y Keyframes, para tener compatibilidad con las versiones de los distintos navegadores. En este ejemplo, tendremos un circulo construido con CSS, cambiando de blanco a rojo al entrar al sitio web. [css] <style>div { width: 100px; height: 100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: red; -webkit-animation-name: MiAnimacion; /* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / animation-name: MiAnimacion; animation-duration: 4s; } / Chrome, Safari, Opera / @-webkit-keyframes MiAnimacion { from {background-color: white;} to {background-color: red;} } / Standard syntax */ @keyframes MiAnimacion { from {background-color: white;} to {background-color: red;} }</style>

<center>

Mi primera animación en CSS3

</center>

[/css] DEMO. Ahora haremos otro ejemplo un poco más complejo, donde se ven otras subpropiedades y un Keyframe intermedio. El ejemplo consiste en poner un rectángulo en movimiento, que entra desde la derecha del navegador con un texto el cuál aumenta de tamaño. Habrá una repetición donde se hace el efecto inverso y se devuelve infinitamente [loop]. [css] <style>div { width: 80px; height: 80px; background-color: #5aaafc; border: 3px solid #1c89f9; -webkit-animation-name: MiAnimacion; /* Chrome, Safari, Opera / -webkit-animation-duration: 6s; / Chrome, Safari, Opera */ animation-duration: 6s; animation-iteration-count: infinite; animation-name: MiAnimacion; animation-direction: alternate; } @-moz-keyframes MiAnimacion { from {font-size:0%; margin-left:100%;} 50% {font-size:400%;} to {font-size:400%; margin-left:20%; width:100%; } } @-webkit-keyframes MiAnimacion { from { font-size:0%; margin-left:100%; } 50% { font-size:400%; } to { font-size:400%; margin-left:20%; width:100%; } }</style>

<center>

Mi segunda animación en CSS3

</center>

<div>CSS3</div>

[/css] DEMO.

Para finalizar, me gustaría agregar que puedes implementar eventos con tu mouse a cada una de las animaciones. Este tipo de animación se ha vuelto muy popular debido a su rendimiento en comparación a Javascript, Flash y otras herramientas. ¡Experimenta y compartenos tus animaciones!.

No te pierdas nuestro tutorial sobre como crear una animación de carga de contenido estilo Facebook y conviértete en todo un profesional del tema.

Si te interesa y quieres ser un maestro no solo de la animación en CSS, sino del diseño de sitios web y todas las tecnologías que contemplan ser un Front-end profesional; regístrate hoy al **curso de HMTL5 y CSS3 en Platzi. **

Entrar al curso de HTML5 y CSS3
Escribe tu comentario
+ 2