Cómo animar con CSS

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. Son llamativos, una excelente manera de agregar algo de interés visual a un sitio y, en general, hacen que la experiencia sea más emocionante para sus usuarios.

Si bien tradicionalmente se logra con GIF, SVG, WebGL y videos de fondo, las animaciones también se pueden crear de manera eficiente con CSS. La compatibilidad de los navegadores con las animaciones CSS ha mejorado mucho y se está volviendo muy popular: los navegadores compatibles incluyen Firefox 5+, IE 10+, Chrome, Safari 4+ y Opera 12+.

Hoy lo guiaré a través de los conceptos básicos para crear una animación CSS con una demostración paso a paso. Quédese después de eso y vea cinco ejemplos de animaciones. ¡Podrás usar todas estas ideas para crear animaciones para tus propios proyectos!

Conceptos básicos de animación CSS

Obviamente, es importante cubrir los conceptos básicos de cómo funcionan las animaciones antes de sumergirnos en las cinco divertidas animaciones CSS.
Por ejemplo, los fotogramas clave son un componente clave de las animaciones CSS. Es posible que esté familiarizado con ese término si ha trabajado con Adobe Flash o tiene experiencia con la edición de videos. En ese caso, el término fotograma clave es justo lo que pensarías: es una forma de especificar una determinada acción.

Es posible que haya encontrado @keyframes en una hoja de estilo CSS antes. Dentro de este @keyframes es donde defines los estilos y etapas para la animación. Aquí hay un gran ejemplo de un efecto de desvanecimiento:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Los conceptos básicos del fotograma clave de desvanecimiento que acabamos de crear incluyen:

• Un nombre descriptivo: en este caso, fadeOut.
• Etapas de la animación: De se estableció en 0% y Hasta se estableció en 100%.
• Estilos CSS que se aplicarán en cada etapa.

De forma predeterminada, From estará en 0% y To estará en 100%, ya que no se especifican otras etapas en este ejemplo.

Acciones específicas con subpropiedades de animación

Necesitamos hacer un poco más para diseñar las cosas: necesitamos diseñar la propiedad de animation con subpropiedades. Si los fotogramas clave definen cómo se verá la animación, las subpropiedades de animación definen reglas específicas para la animación. Estos le permiten configurar el tiempo, la duración y otros detalles clave de cómo debe progresar la secuencia de animación.

La propiedad de animación se usa para llamar @keyframes dentro de un selector CSS. Las animaciones pueden tener y a menudo tendrán más de una subpropiedad. Estos son ejemplos de subpropiedades:

Asociarse con un artista de gráficos en movimiento

Nada puede dar vida a sus diseños como la animación. Pero si nunca ha trabajado con un animador o artista de gráficos en movimiento, el movimiento puede sentirse como un mundo extraño. Si estás pensando en p...

• Animation-name: nombre de la regla @keyframes , que describe los fotogramas clave de la animación. El nombre fadeOut del ejemplo anterior es un ejemplo de nombre-animación.
• Duración de la animación: tiempo que debe tomar una animación para completar un ciclo completo.
• Función de temporización de animación: temporización de la animación, específicamente cómo la animación pasa por los fotogramas clave. Esta función tiene la capacidad de establecer curvas de aceleración. Los ejemplos son lineal, facilidad, facilidad de entrada, facilidad de salida, facilidad de entrada o salida cúbica .
• 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 se debe repetir la animación. ¿Quieres que la animación continúe para siempre? Puede especificar infinito para repetir la animación indefinidamente.
• Dirección de la animación: si la animación debe o no alternar la dirección en cada ejecución de la secuencia o restablecerse al punto de inicio y repetirse.
• Animation-fill-mode: valores que aplica la animación tanto antes como después de su ejecución.
• Animation-play-state: con esta opción, puede pausar y reanudar la secuencia de animación. Los ejemplos son ninguno, adelante, atrás o ambos .

Reuniéndolo todo para obtener la mejor compatibilidad con el navegador

Están sucediendo muchas cosas aquí, y la terminología puede ser un poco confusa. Pero ahora sabemos que los fotogramas clave definen cómo se verá la animación, así como las diferentes etapas de animación, y que la propiedad de animación usa subpropiedades para definir opciones de animación como retraso, dirección, tiempo, etc.

Probablemente esté 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. Estos son los prefijos estándar del navegador:

• Chrome y Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

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

Inicio de transición

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

Transformar inicio:

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

Cinco animaciones en acción.

Ahora que hemos cubierto los conceptos básicos, ¡creemos un código para ponerlo en práctica!

Animación uno: círculo a cuadrado

Profundicemos en este primero, para que podamos asegurarnos de que entendemos todos los conceptos que hemos cubierto hasta ahora. La animación comenzará como un círculo y se transformará en un cuadrado.

Crear un div para comenzar es una excelente manera de probar la animación:

<div class=”animationOne”>
</div>

Ahora configuremos nuestros @keyframes . Esta animación tendrá cinco etapas porque un cuadrado tiene cuatro lados y necesitamos tener un punto de partida del 0%. Use prefijos, como se muestra a continuación, pero para el resto del tutorial lo mantendremos simple con solo lo básico.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Ahora, creemos algunos estilos para determinar cuál será el radio del borde en cada etapa:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Ahora agregue la propiedad background-color para ayudar a diferenciar cada etapa de la animación:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Finalmente, apliquemos la animación al div de prueba:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

La propiedad de animación generalmente se escribe en forma abreviada, por lo que esto es lo que realmente sucede en el código:

• El nombre de la animación es circle-to-square .
• La duración de la animación es de 2s .
• El retraso de la animación es 1s .
• El recuento de iteraciones de animación es infinite , por lo que continuará indefinidamente.
• Y la dirección de animación es alternate . Esto significa que se reproducirá de principio a fin y volverá al principio.

Animación dos: rotación

Esta animación permite la rotación de un objeto.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Para mantener nuestros proyectos de animación separados, recuerda crear otro div para este segundo ejemplo. Agregué un color de fondo porque agregaremos la animación al propio div para este ejemplo.

La duración de esta animación es de dos segundos, con un retraso de tres segundos. El recuento de iteraciones de animación es cinco, por lo que este proyecto se animará cinco veces antes de detenerse. La animación se reproduce en sentido inverso cada vez impar (1,3,5,... ) y en dirección normal cada vez par (2,4,6,... ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animación tres: expandir y parpadear

Esta es una gran animación para un botón porque es más llamativo y prominente en comparación con otros elementos de la página. Esto también podría ser algo que valga la pena incluir en un estado :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Para probar esto, necesitamos el siguiente div de inicio:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animación cuatro: diapositiva de texto
Agreguemos algo de animación al texto. Este proyecto hace que su texto se deslice una vez desde la izquierda.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animación cinco: fundido de entrada

¿Tienes algún contenido sorpresa? Echa un vistazo a esta animación de aparición gradual para ver el contenido que deseas que aparezca en un momento posterior. Aquí tiene muchas opciones: el fundido de entrada puede ser rápido o lento, suceder una o varias veces, etc.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

¡Las animaciones CSS3 son fantásticas para hacer que su sitio web se mueva y se mueva! Ahora que conoce los conceptos básicos para crear animaciones, las posibilidades de animación son infinitas. ¿Qué vas a animar?