¿Cómo animar una imagen con CSS3? ► Rotación

by José Luis Pérez octubre 04, 2018
¿Cómo ANIMAR una imagen con CSS3? ej. Rotación

Animar una imagen con CSS3

Nos hemos acostumbrado bastante a ver animaciones en los sitios web y a disfrutar de la energía y la variedad que aportan al diseño web. Llaman la atención, son una excelente manera de agregar interés visual a un sitio web y, en general, hacen que la experiencia de tus usuarios sea más emocionante.

Aunque tradicionalmente se logra con GIF, SVG, WebGL y videos de fondo, las animaciones también se pueden crear de manera eficiente con CSS. El soporte del navegador para las animaciones CSS ha mejorado mucho y se está volviendo bastante popular. Los navegadores compatibles incluyen Firefox 5+, IE 10+, Chrome, Safari 4+ y Opera 12+.

Conceptos básicos sobre la animación con CSS3

Obviamente, es importante cubrir los aspectos básicos de cómo funcionan las animaciones antes de sumergirnos en las divertidas animaciones que se pueden hacer usando la magia del CSS. Por ejemplo, los ‘keyframes’ son un componente clave para las animaciones CSS. Puedes estar familiarizado con este término si has trabajado con Adobe Flash o tiene experiencia en la edición de videos. En ese caso, el término ‘keyframes’ es justo lo que pensarías: es una forma de especificar una determinada acción.

Es posible que haya aparecido @keyframes en una hoja de estilo CSS antes. Es ahí, en los @keyframes donde se definen los estilos y etapas para la animación.

Acciones específicas con las sub-propiedades de animación

Necesitamos hacer un poco más para dar estilo a las cosas, necesitamos darle estilo a la propiedad ‘animation’ con las sub-propiedades. Si los ‘keyframes’ definen cómo se verá la animación, las sub-propiedades de la animación definen las reglas específicas para la animación. Esto te permite configurar el tiempo, la duración y otros detalles clave de cómo debería progresar la secuencia de animación.

La propiedad de animación se utiliza para llamar @keyframes dentro de un selector CSS. Las animaciones pueden y, con frecuencia, tendrán más de una sub-propiedad. Aquí te muestro algunos ejemplos:

  • Animation-name: nombre del @keyframes, que describe los ‘keyframes’ de la animación. El nombre ‘fadeOut’, por ejemplo, es el nombre de animación.
  • Animation-duration: tiempo que debe durar una animación para completar un ciclo completo.
  • Animation-timing-function: sincronización de la animación, específicamente cómo las transiciones de animación a través de ‘keyframes’. Esta función tiene la capacidad de establecer curvas de aceleración. Los ejemplos son: linear, ease, ease-in, ease-out, ease-in-out, o cubic-bezier.
  • Animation-delay: retraso entre el momento en que se carga el elemento y el comienzo de la animación.
  • Animation-iteration-count: número de veces que la animación debe repetirse. ¿Quieres que la animación continúe para siempre? Puedes especificar infinito para repetir la animación indefinidamente.
  • Animation-direction: si la animación debe o no alternar la dirección en cada ejecución a través de la secuencia o restablecer el punto de inicio y repetirse.
  • Animation-fill-mode: los valores que se aplican por la animación antes y después que se han ejecutado.
  • Animation-play-state: con esta opción, puede pausar y reanudar la secuencia de animación. Los ejemplos son: none, forwards, backwards, o both.

Poniendo todo junto para mejor soporte del navegador

Hay mucho que hacer aquí, y la terminología puede ser un poco confusa. Pero ahora sabemos que los ‘keyframes’ definen cómo se verá la animación, así como las diferentes etapas de la animación, y que la propiedad de la animación utiliza sub-propiedades para definir opciones de animación como demora, dirección, tiempo, etc.

Probablemente estés familiarizado con los prefijos de proveedores o navegadores, que son necesarios cuando se trabaja con animaciones. Necesitamos asegurarnos de que tenemos el mejor soporte de navegador. Aquí están los prefijos del navegador estándar:

  • Chrome y Safari: -webkit-
  • Firefox: -moz-
  • Explorador de Internet: -ms-

Internet Explorer 10 no requiere un prefijo para las transiciones, pero todas las transformaciones requieren el prefijo. Opera está cubierta porque reconoce los estilos de WebKit.

Inicio de la transición:

  • -webkit-transition
  • -moz-transition
  • transition

Inicio de transformación:

  • -webkit-transform
  • -moz-transform
  • -ms-transform
  • transform

Ahora si un ejemplo de la animación para rotar una imagen

Código CSS para configurar la animación:

#animation-rotate {
animation: rotate 3s infinite;
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes rotate {
0%, 100% {
transform: rotate(10deg);
}
50% {
transform: rotate(-10deg);
}
}

Resultado:

Rating:
[Total:7    Promedio:4.9/5]
Social Shares