Principios de Animación CSS: Keyframes y Animation en Acción

🎉¡Te damos la bienvenida al curso de Animaciones con CSS! 🎉

Por lo general, al hablar de animaciones y todo lo que conlleva, nos podemos intimidar al pensar en la complejidad que representa, pero realmente trabajar con animaciones es uno de los caminos más fáciles para desarrollar lo que nos propongamos. Antes de ello, se recomienda haber tomado el curso de Transformaciones y Transiciones ✨, para contar con una base.

¿Qué es una animación? 🎭

Una animación podría ser descrita como un conjunto de fotogramas que cuenten con un estado inicial y final, compuesto de distintos puntos medios que conforman la misma. Además, desde pequeños nuestros ojos 👀 han sido entrenados de forma involuntario al momento de ver las caricaturas a través del televisor.

Principios de animación para la web 💻

Actualmente, en el desarrollo web, podemos contar con diversas animaciones realizadas en su mayoría con CSS. Para ello, existen principios a seguir, que se crearon con el fin de optimizar y aprovechar al máximo esta función. Estos principios describen cómo se puede utilizar la animación para sumergir a los espectadores en un mundo creíble 👓. Un dato interesante, es que dichos principios fueron utilizados como metodología de trabajo para las animaciones que Disney diseñaba en aquellos tiempos.

Entre ellos tenemos (estarán mencionados en su lengua original):

• Squash and stretch
• Anticipation
• Staging
• Straight-Ahead Action and Pose-to-Pose
• Follow Through and Overlapping Action
• Slow In and Slow Out
• Arc
• Secondary Action
• Timing
• Exaggeration
• Solid drawing
• Appeal

Contribución creada con los aportes de:Angel David Osorio Leyva