Cree una divertida animación de intercambio de fotos con fotogramas clave CSS

Las animaciones de fotogramas clave de CSS abren una amplia gama de posibilidades para lo que se puede lograr con CSS. Mucho más que simples transiciones de un paso, los fotogramas clave se pueden usar para lograr animaciones complejas de varios pasos que son bastante impresionantes.

En el proyecto de hoy, comenzaremos de cero y construiremos una pila de dos fotos que se expandirán e intercambiarán su orden de apilamiento cuando se desplace sobre ellas. ¡En el camino aprenderemos todo sobre cómo manejar fotogramas clave como un profesional y hacer malabarismos con todos esos prefijos de cabeza giratoria!

Lo que estamos construyendo

El concepto para este proyecto es bastante simple. Imagina dos fotos, rotadas al azar y apiladas una sobre otra como si las hubieras tirado en un escritorio. El problema es que solo puedes ver la foto en la parte superior.

Para ayudar a esa foto inferior a obtener la atención que merece, vamos a crear un evento flotante que primero separa las dos fotos, luego desliza la foto superior detrás de la foto inferior, cambiando efectivamente el orden de apilamiento.

Las probabilidades son que, si lees este blog, eres un pensador visual, así que esto es lo que se ve en las fotos:

Animaciones de fotogramas clave frente a transiciones

Actualmente, CSS tiene dos opciones principales para animar un elemento: transiciones y fotogramas clave. Cada vez que desee animar algo, debe analizar la situación y decidir qué método es el adecuado. Afortunadamente, decidir entre los dos es muy fácil.

Siempre que tenga una animación simple con un solo paso, una transición es la solución perfecta. Por ejemplo, si quieres que algo gire ligeramente cuando pasas el ratón sobre él, probablemente lograrás el efecto con una transición. Simplemente establece el estado original, luego el estado girado y la transición entre los dos.

Ahora, imagine que desea profundizar más en esta idea y crear un dial animado como el que vería para abrir una caja fuerte. Probablemente querrás que gire en el sentido de las agujas del reloj por un segundo, luego en sentido contrario a las agujas del reloj, y tal vez nuevamente en el sentido de las agujas del reloj, entiendes la idea. Para este escenario, definitivamente querrás ir con una animación de fotogramas clave.

¿Qué debemos usar?

Arriba, describimos la animación que queremos lograr. Obviamente, va a ser bastante complejo. Varios elementos se moverán de un lado a otro, girando e intercambiando su orden de apilamiento. Dada esta complejidad, las animaciones de fotogramas clave son la elección natural.

Soporte del navegador

¿Es bueno tener en cuenta que tanto los fotogramas clave como las transiciones ahora tienen un soporte bastante decente en los principales navegadores? excepto por supuesto para IE. Por lo que sé, no se admitirán transiciones ni animaciones hasta IE10, por lo que obviamente no querrá confiar en ellas para ninguna funcionalidad importante.

Fuente: CanIUse.com

Paso 1. El HTML

Basta de construir, vamos a la construcción de este lechón. Lo primero que debe hacer es diseñar el proyecto en HTML. Esto es, por supuesto, extremadamente fácil. Todo lo que necesitamos es un contenedor con dos imágenes.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-fun-photo-swap-animation-with-css-keyframes_4.jpg"> <h2><em>Etapa 4.</em> Girar y posicionar las fotos</h2> <p>Avanzando, es hora de ayudar a distinguir visualmente las dos fotos. Para ello, queremos movernos? Pictwo? a la derecha y rotar ambas imágenes usando transformaciones CSS.</p> <p>Giraremos ambas imágenes siete grados, solo nos aseguraremos de que la primera tenga un valor negativo y la segunda una positiva para que se compensen entre sí.</p> <textarea wrap="soft" readonly=""> / * FOTOS ESPECÍFICOS * / .picone {-webkit-transform: rotate (-7deg); -moz-transform: rotate (-7deg); -o-transformar: rotar (-7deg); -ms-transform: rotar (-7deg); transformar: rotar (-7deg); } .pictwo {izquierda: 100px; -webkit-transform: rotate (7deg); -moz-transform: rotate (7deg); -o-transformar: rotar (7deg); -ms-transform: rotar (7deg); transformar: rotar (7deg); }

Control del progreso

En este punto, todo nuestro estilo visual base está terminado. Deberías tener una bonita y pequeña pila de dos fotos que se vea así:

Paso 5 Planea la animacion

Ahora que hemos configurado las fotos de la manera que nos gusta, necesitamos planificar los detalles de cómo vamos a hacer que se muevan. Como hay dos fotos, tendremos que planificar los movimientos específicos de cada una.

Pic One

La primera imagen comienza en la parte inferior de la pila. La mayor parte del movimiento se llevará a cabo en la otra foto, pero quiero hacer que parezca que se está apartando del camino y dejar espacio para la otra, así que la rotaremos ligeramente.

Sin preocuparse por la sintaxis real, planifiquemos cada paso. Los fotogramas clave utilizan porcentajes para trazar la animación, así que eso es lo que usaremos aquí.

• 0%: rotar (-7deg)
• 50%: rotar (-14deg)
• 100%: rotar (-7deg)

Como puede ver, comenzamos con nuestra rotación predeterminada de -7, luego pasamos a una rotación de -14 y finalmente giramos de regreso a donde empezamos.

Foto dos

La segunda foto es mucho más complicada. En esta ocasión, queremos mover la foto unos cientos de píxeles a la derecha mientras la giramos, cambiarla a la parte inferior de la pila y luego volver a colocarla en el lugar donde comenzó, mientras permanecemos en la parte inferior. Esto es lo que parece:

• 0%: izquierda 100px, índice z 1, rotar (7 grados)
• 49%: izquierda 350 px, índice z 1, rotar (20 grados)
• 50%: 350px izquierdo, índice z-3, rotar (20 grados)
• 100%: izquierda 100px, índice z-3, rotar (7 grados)

Observe que los pasos en 49% y 50% son idénticos, aparte del valor del índice z. No queremos que esta foto salte a la parte inferior de la pila hasta que esté fuera del camino de la otra, por lo que tenemos que moverla antes de saltarla.

Codificar la animación

Ahora que hemos planificado conceptualmente la animación, es hora de codificar las versiones CSS. Usando las progresiones que acabamos de llegar, esto resulta ser bastante fácil. Recuerda que esto es solo definir las animaciones, las implementaremos más adelante.

/ * KEYFRAME ANIMATIONS * / @keyframes picone {0% {transform: rotate (-7deg)} 50% {transform: rotate (-14deg)} 100% {transform: rotate (-7deg)}} @keyframes pictwo {0% {izquierda: 100px; índice z: 1; transform: rotate (7deg)} 49% {left: 350px; índice z: 1; transform: rotate (20deg)} 50% {left: 350px; índice z: -3; transform: rotate (20deg)} 100% {left: 100px; índice z: -3; transformar: rotar (7deg)}}

Prefijo Mayhem

La peor parte absoluta del uso de animaciones de fotogramas clave en CSS es el lío de código que tienes que usar para sacarlos de todos los posibles navegadores. El código que acabamos de escribir es bastante simple, pero ahora tenemos que repetirlo con todos los distintos prefijos.

Sin embargo, hay una lección importante aquí, así que esta es una buena práctica. La parte difícil es que hemos incrustado una propiedad que necesita prefijar (transformar) dentro de otra (@keyframes). Esto lleva a un gran dolor de cabeza. Y por grande, me refiero a más de doscientas líneas de código grande.

? Esto conduce a un gran dolor de cabeza. Y por grande, me refiero a más de doscientas líneas de código grande.

Para el fragmento de código anterior, necesitamos expandir todas las rotaciones para que tengan los cuatro prefijos principales (webkit, moz, o y ms). Luego debemos repetir todo al mismo tiempo que agregamos los prefijos apropiados a la línea @keyframe también, pero dentro de cada uno de estos, solo necesita la propiedad de rotación estándar junto con el prefijo que coincide con el prefijo del fotograma clave principal. Confundido ya? Yo también.

Afortunadamente, Prefixr está aquí para salvar el día. Toma la sintaxis estándar desde arriba y suéltala, luego saldrán todas las piezas que necesitas para hacer que esto funcione.

/ * PICONE KEYFRAME ANIMATIONS * / / * sintaxis estándar * / @keyframes "picone" {0% {-webkit-transform: rotate (-7deg); -moz-transform: rotate (-7deg); -o-transformar: rotar (-7deg); -ms-transform: rotar (-7deg); transformar: rotar (-7deg); } 50% {-webkit-transform: rotate (-14deg); -moz-transform: rotate (-14deg); -o-transformar: rotar (-14deg); -ms-transform: rotar (-14deg); transformar: rotar (-14deg); } 100% {-webkit-transform: rotate (-7deg); -moz-transform: rotate (-7deg); -o-transformar: rotar (-7deg); -ms-transform: rotar (-7deg); transformar: rotar (-7deg); }} / * sintaxis moz * / @ -moz-keyframes picone {0% {-moz-transform: rotate (-7deg); transformar: rotar (-7deg); } 50% {-moz-transform: rotate (-14deg); transformar: rotar (-14deg); } 100% {-moz-transform: rotate (-7deg); transformar: rotar (-7deg); }} / * sintaxis del webkit * / @ -webkit-keyframes "picone" {0% {-webkit-transform: rotate (-7deg); transformar: rotar (-7deg); } 50% {-webkit-transform: rotate (-14deg); transformar: rotar (-14deg); } 100% {-webkit-transform: rotate (-7deg); transformar: rotar (-7deg); }} / * ms sintaxis * / @ -ms-keyframes "picone" {0% {-ms-transform: rotate (-7deg); transformar: rotar (-7deg); } 50% {-ms-transform: rotate (-14deg); transformar: rotar (-14deg); } 100% {-ms-transform: rotate (-7deg); transformar: rotar (-7deg); }} / * o sintaxis * / @ -o fotogramas clave "picone" {0% {-o-transform: rotate (-7deg); transformar: rotar (-7deg); } 50% {-o-transform: rotate (-14deg); transformar: rotar (-14deg); } 100% {-o-transform: rotate (-7deg); transformar: rotar (-7deg); }} / * PICTWO KEYFRAME ANIMATIONS * / / * sintaxis estándar * / @keyframes "pictwo" {0% {left: 100px; índice z: 1; -webkit-transform: rotate (7deg); -moz-transform: rotate (7deg); -o-transformar: rotar (7deg); -ms-transform: rotar (7deg); transformar: rotar (7deg); } 49% {izquierda: 350px; índice z: 1; -webkit-transform: rotate (20deg); -moz-transform: rotate (20deg); -o-transformar: rotar (20deg); -ms-transformar: rotar (20deg); transformar: rotar (20deg); } 50% {izquierda: 350px; índice z: -3; -webkit-transform: rotate (20deg); -moz-transform: rotate (20deg); -o-transformar: rotar (20deg); -ms-transformar: rotar (20deg); transformar: rotar (20deg); } 100% {izquierda: 100px; índice z: -3; -webkit-transform: rotate (7deg); -moz-transform: rotate (7deg); -o-transformar: rotar (7deg); -ms-transform: rotar (7deg); transformar: rotar (7deg); }} / * sintaxis moz * / @ -moz-keyframes pictwo {0% {left: 100px; índice z: 1; -moz-transform: rotate (7deg); transformar: rotar (7deg); } 49% {izquierda: 350px; índice z: 1; -moz-transform: rotate (20deg); transformar: rotar (20deg); } 50% {izquierda: 350px; índice z: -3; -moz-transform: rotate (20deg); transformar: rotar (20deg); } 100% {izquierda: 100px; índice z: -3; -moz-transform: rotate (7deg); transformar: rotar (7deg); }} / * sintaxis del webkit * / @ -webkit-keyframes "pictwo" {0% {left: 100px; índice z: 1; -webkit-transform: rotate (7deg); transformar: rotar (7deg); } 49% {izquierda: 350px; índice z: 1; -webkit-transform: rotate (20deg); transformar: rotar (20deg); } 50% {izquierda: 350px; índice z: -3; -webkit-transform: rotate (20deg); transformar: rotar (20deg); } 100% {izquierda: 100px; índice z: -3; -webkit-transform: rotate (7deg); transformar: rotar (7deg); }} / * ms sintaxis * / @ -ms-keyframes "pictwo" {0% {left: 100px; índice z: 1; -ms-transform: rotar (7deg); transformar: rotar (7deg); } 49% {izquierda: 350px; índice z: 1; -ms-transformar:gire (20deg); transformar: rotar (20deg); } 50% {izquierda: 350px; índice z: -3; -ms-transformar: rotar (20deg); transformar: rotar (20deg); } 100% {izquierda: 100px; índice z: -3; -ms-transform: rotar (7deg); transformar: rotar (7deg); }} / * o sintaxis * / @ -o-fotogramas clave "pictwo" {0% {izquierda: 100px; índice z: 1; -o-transformar: rotar (7deg); transformar: rotar (7deg); } 49% {izquierda: 350px; índice z: 1; -o-transformar: rotar (20deg); transformar: rotar (20deg); } 50% {izquierda: 350px; índice z: -3; -o-transformar: rotar (20deg); transformar: rotar (20deg); } 100% {izquierda: 100px; índice z: -3; -o-transformar: rotar (7deg); transformar: rotar (7deg); }}

¿Me estás tomando el pelo?

¿Más de 250 líneas de código solo para definir algunas animaciones simples? ¿Qué estoy fumando? Desafortunadamente, si queremos llevar esto a cabo con CSS, esto es lo que necesitaremos hasta que los fotogramas clave se conviertan en una característica estándar, sin prefijo.

La lección aquí es tener cuidado al agregar complejidad a las animaciones de fotogramas clave, ya que se vuelve increíblemente rápido. ¡La segunda lección es que jQuery sigue siendo a menudo la solución más fácil para lograr animaciones simples en todos los navegadores!

Activando las animaciones

Simplemente definir las animaciones de fotogramas clave no hace que suceda nada, necesitamos implementarlas con la? Animación? sintaxis. Para ello, utilizamos la sintaxis de animación.

Queremos que esto suceda cuando pasamos sobre el contenedor, por lo que usamos .container: hover, luego diferencie basado en la clase para cada una de nuestras imágenes.

.container: hover .picone {-webkit-animation: picone 1.5s 2 alterno; -moz-animación: picone 1.5s 2 alterno; -ms-animación: picone 1.5s 2 suplente; -o-animación: picone 1.5s 2 alterno; Animación: picone 1.5s 2 suplente; } .container: hover .pictwo {-webkit-animation: pictwo 1.5s 2 alterno; -moz-animation: pictwo 1.5s 2 alterno; -ms-animación: pictwo 1.5s 2 alterno; -o-animación: pictwo 1.5s 2 alterno; Animación: pictwo 1.5s 2 suplente; }

Aquí hemos llamado a la animación usando los nombres que establecimos antes, configuramos la duración en un segundo y medio, establecemos la iteración en dos y luego usamos alterno de modo que la primera iteración recorre los pasos en orden y la segunda los retroceda para que terminemos donde empezamos.

¡Véalo trabajar!

Buenas noticias, todos hemos terminado. Para ver el código completo junto con una demostración en vivo, haga clic en el siguiente enlace.

Manifestación: Haga clic aquí para lanzar

Fotogramas clave CSS: todavía no está del todo

En concepto, la eliminación de animaciones complejas con CSS es sorprendentemente fácil. La sintaxis es sencilla, flexible y fácil de captar.

Desafortunadamente, el soporte para el navegador aún no está donde queremos y el código necesario para la implementación puede volverse completamente loco cuando comienzas a integrar otras propiedades de CSS con prefijo en la mezcla junto con los fotogramas clave.

Dicho esto, esto fue todavía una explosión increíble y si lo lograste completamente, ¡sin duda serás un verdadero profesional en lo que respecta a la sintaxis de fotogramas clave!