Animaciones CSS: Introducción y ejemplos

Los efectos animados más básicos en CSS se pueden lograr a través de propiedades como transform y transition . Sin embargo, el borrador de trabajo CSS Animations Level 1 proporciona un entorno más complejo al utilizar propiedades de animation y @keyframes para lograr efectos de animación perpetuos. Esto se entiende mejor a través de un ejemplo definitivo.

Especificación de reglas de animación usando @keyframes

La regla @keyframes se utiliza para especificar el comportamiento de animación que deseamos aplicar a un identificador de animación en el diseño de página. El identificador se especifica a través animation-name o mediante el uso de animation: name; taquigrafía.

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

En este contexto, el ejemplo anterior cambiará el background-color de blanco a negro durante la duración de la animación. from se refiere al principio (0%) y to se refiere al final (100%). Entonces, la regla también se puede reescribir con valores porcentuales.

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

Por sí solo, esto no hará nada a menos que especifiquemos el elemento que deseamos animar. Además, también debe especificar animation-duration ya que el valor predeterminado es 0.

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

Luego podemos llamar a nuestro contenedor usando un div y el resultado sería este:

Por lo general, la mayoría de las animaciones CSS escritas en CSS puro usan taquigrafía porque ahorra escribir varias líneas de la lógica de animación. Como tal, aquí hay una referencia para los valores de propiedad de animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

Otras lecturas

Si desea obtener más información sobre las animaciones CSS en profundidad, estos son mis recursos recomendados:

• Codrops CSS Reference: esta es una extensa referencia escrita y organizada por Sara Soueidan (@SaraSoueidan) y contiene ejemplos detallados de cómo funcionan ciertas propiedades de CSS.
• Animaciones CSS de MDN: una extensa introducción al estilo de la documentación sobre las animaciones CSS en la página Web Docs de MDN.
• Introducción a cubic-bezier(): un artículo detallado escrito por Temani Afif (@ChallengesCss) para CSS-Tricks sobre el uso de la propiedad cubic-bezier() para crear animaciones CSS avanzadas.

Ejemplos de animaciones CSS

La mejor manera de aprender cualquier cosa es a través de ejemplos. La siguiente sección está dedicada por completo a varios efectos logrados a través de las propiedades de animación CSS.

¡Una última cosa! Muchas de las animaciones de ejemplo a continuación tienen bastante código asociado, por lo que he agregado un desbordamiento de altura máxima a este artículo para habilitar una barra de desplazamiento. También puede pasar el cursor sobre cada fragmento de código y copiarlo en el portapapeles para importarlo a su editor de código.

Ola

La animación de onda se crea dibujando primero una ruta SVG para un patrón de onda y luego asignándole una ID. Luego, especificamos cuatro clases nth-child con variables personalizadas animation-delay animation-duration . Cada variable representa una ola individual dentro de la animación, y cada ola se puede diseñar de forma independiente.

La ventaja de definir el patrón con SVG es que el código se vuelve fácilmente reutilizable.

Si observa la ruta que hemos dibujado, especificamos cuatro capas diferentes para la onda (usando un eje personalizado) y luego hacemos referencia a la identificación #wave-pattern que configuramos para la ruta inicial. Aquí es donde también puede cambiar la apariencia del color de cada ola.

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

Cargando Texto

Este efecto de carga es relativamente fácil de implementar porque utiliza solo un puñado de propiedades prácticas de animación. Primero, desea especificar content: attr() que luego aplica al elemento de texto que desea animar. Después, especificas la animación en sí, que en nuestro caso es animation: loading 5s linear infinite; .

La duración del efecto de carga se puede modificar cambiando la propiedad 5s. Y, por último, usamos @keyframes para llamar a la animación de carga y cambiar su ancho de 0% a 100% durante ese período de 5 segundos. Cuanto mayor sea el valor de la duración de la animación, más lento será el efecto de carga.

Los casos de uso específicos para una animación como esta son efectos de transición para cargas de página, pero también una solución confiable para proyectos de aplicaciones cuando no desea depender de ninguna biblioteca.

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

Onda de texto

Una de las primeras cosas que notará sobre esta animación es su fluidez . Esto es posible porque usamos la función calc() para calcular matemáticamente cada transición. Dado que escribimos la animación en CSS puro, tenemos que usar varios elementos de span para especificar cada letra consecutiva en la animación.

En cuanto a modificar la profundidad de la ola, primero puedes cambiar la duración de 3s a un número menor o mayor. Más alto significa que el efecto de onda será más lento y viceversa. Y dentro de @keyframes puedes cambiar la especificación -24px para cambiar la altura de la ola.

Cuanto mayor sea el valor negativo, más pronunciado será el efecto de onda.

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

Efecto de pulso / ondulación

Comenzamos creando un contenedor para el círculo al que deseamos aplicar el efecto. Esto es específico de la demostración, pero puede reutilizar el código para cualquier otro elemento de su página. Después, creamos una clase llamada .circle que servirá como efecto dominó animado.

Dos propiedades notables que usamos en esta clase son la opacity: 0.5; y animation: ease-out; . La opacidad es lo que crea la ilusión de tener ondas/pulsos, y la transición de salida facilita que esas ondas salgan del contenedor original.

A continuación, tomamos nuestra clase .circle y le aplicamos la propiedad nth-of-type() . Para este ejemplo, estamos usando 3 círculos individuales que salen del contenedor original. Dentro de las llamadas de tipo n, aplicamos animation-delay con los valores de -0.5s;-1s;-1.5s. Cuanto mayor sea el valor negativo, más tardarán los efectos en renderizarse por completo.

Y, por último, aplicamos @keyframes a nuestra animación de pulso especificada. En este ejemplo, utilizamos la propiedad transform: scale() . Esto define el tamaño de los pulsos para cada animación. Cuanto más alto sea el valor, más grandes aparecerán las ondas salientes.

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

Contador (Números)

La propiedad de contador es fácil de pasar por alto porque generalmente agrega números a ciertos elementos a mano. Sin embargo, resulta útil cuando desea realizar asignaciones anidadas detalladas a elementos de menú o páginas de documentación de gran tamaño.

Además, puede armar un contador automatizado para los encabezados de las publicaciones del blog. Por ejemplo, está escribiendo una reseña sobre varias herramientas. Y, lo mejor de todo, el mostrador se puede diseñar individualmente, lo que le brinda más libertad de diseño.

Pero, para esta demostración, nos estamos enfocando en usar la propiedad de counter para crear un efecto de contador automatizado. Entonces, profundicemos y comprendamos cómo funciona. Para este ejemplo, primero creamos un contenedor que contendrá la animación del contador. Puedes personalizar esto como quieras. A continuación, creamos nuestra clase .count-numbers que incluye la sintaxis de animación, en este caso es animation: count-numbers 10s linear infinite forwards; .

Para desglosarlo, especificamos el nombre de nuestra animación, establecemos la duración en 10 segundos y establecemos la dirección de la animación en normal porque no queremos que cuente hacia atrás desde 10. Aunque, puede establecerlo en alterne si desea que su contador también cuente hacia atrás.

Continuando, especificamos una nueva clase llamada .count-numbers::antes de la cual usamos para nombrar nuestro contador, en este caso, content: counter(count); . Esto es importante porque el siguiente paso es usar el counter-name para animar el efecto a través @keyframes .

El último paso es escribir nuestras especificaciones para la animación a renderizar. En nuestra demostración, contamos del 1 al 10, por lo que especificamos nuestro valor de @keyframes del 0 % al 100 % en incrementos del 10 %. Cada incremento contiene una declaración de incremento de contador que también usa nuestro nombre de contador: counter-increment: count 0; .

Entonces, al 0% nuestro incremento se establece en 0 y al 10% se establece en 1 para proyectar el efecto de un contador.

Además, intente cambiar el content: counter(count); especificación del contenido: contador(cuenta, romano superior); ¡y mira lo que pasa!

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

Pelota que rebota

Comenzamos creando primero un contenedor para nuestra bola, en este caso, es .ball-container .

A continuación, especificamos el tamaño de la bola y el estilo de su apariencia mediante una combinación de colores de fondo y efectos de sombra. En nuestra demostración, hemos optado por un efecto más brillante, pero puede modificarlo según sus propias necesidades. Y finalmente, especificamos la animación, en este caso, establecemos una duración de 5 segundos y también aplicamos ease-in-out lo que significa que la transición tiene un comienzo y un final lentos.

Después de dibujar la bola y configurar la animación, podemos escribir nuestras reglas @keyframes . Para lograr el efecto rebote, usamos transform: translatey(); en incrementos del 50 %, es decir, del 0 % al 50 % al 100 %. El énfasis está en el 50% porque aquí establecemos la altura del rebote especificando transform: translatey(-50px); – el rebote/flotación tendrá una altura de 50 px (en relación con el contenedor). Cuanto mayor sea el número negativo, más alto va a rebotar la pelota.

Asimismo, especificar un número menor reducirá el tamaño del rebote.

La última parte es agregar una sombra, aunque también puede eliminarla, ya que no tendrá ningún efecto en la animación de la pelota. La única diferencia con la sombra es que usamos la propiedad transform: scale() para cambiar el tamaño de la sombra en un contexto 2D. Establecemos los valores de acuerdo a la escala de efecto que deseamos lograr.

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

Lanzamiento de moneda

Lo que me encanta de esta animación es que podemos establecer un radio de rotación increíblemente preciso para lograr un efecto que se siente como si la moneda estuviera realmente lanzada. Entonces, para comenzar, necesitará 2 imágenes (estoy usando SVG para esta demostración, pero las fotos normales funcionan igual de bien. Solo asegúrese de aplicar la clase correcta a cada imagen) y configúrelas en opacity: 0; . Lo configuramos en 0 porque más adelante, usamos @keyframes para cambiar su opacidad para que las imágenes aparezcan en la vista en ciertas posiciones durante la animación.

La clase .image-container se usa para especificar las dimensiones de las imágenes dentro de la moneda. Asegúrese de especificar esto también para las imágenes reales, como se muestra en el fragmento a continuación. A continuación, especificamos .coin-style que es la parte exterior (la moneda en sí). Técnicamente, puede establecer esto en transparente, pero por el bien de una demostración, lo hacemos visible.

El concepto principal para la .coin-style es la forma en que agregamos la animación, que en este caso es: animación: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite infinite; .

El punto de interés es la especificación cubic-bezier() , que nos da el efecto de curva giratoria para el contenedor de monedas. Esto es prácticamente imposible de escribir por su cuenta, por lo que mi recomendación es usar cualquier herramienta generadora para generar el efecto de curva deseado.

Y, por último, dentro de nuestros @keyframes , aplicamos la función scaleX() para cambiar el tamaño de la apariencia de la moneda en x-axis . Incluso el cambio más mínimo en los valores proporcionados (en esta demostración) modificará la forma en que aparece el efecto "flip".

Creo que la implementación a continuación es lo más cerca posible de la perfección, ¡pero tal vez puedas hacerlo mejor!

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

En este lado

Para hacer que esta animación funcione, usamos la animation: ease-out; función en combinación con un valor de posición negativo dentro @keyframes . Entonces, en este ejemplo especificamos 0% {opacity: 0;left: -700px;} lo que hace que nuestro elemento deslizable sea invisible al principio, pero también se coloca 700px fuera del contenedor.

Luego, especificamos 100% {opacity: 1;left: 0;} que, para cuando termine nuestra animación (la tenemos configurada en 2 segundos), devolverá la visibilidad normal y colocará nuestro elemento nuevamente en su posición relativa.

Una cosa interesante a tener en cuenta es que este efecto funciona en todas las direcciones.

Si desea cambiar el efecto deslizante para que aparezca desde el lado derecho, debe cambiar el lado izquierdo:; valores a la derecha:; y viceversa para posiciones como arriba y abajo. También puede retrasar la animación ajustando el tiempo que tarda el elemento en deslizarse.

Un valor más alto ralentizará la animación.

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

Efecto de gota

En primer lugar, ¿qué diablos es un Blob? Como dijo Ian Latchmansingh, “The Blob es una forma pseudoorgánica amorfa que se usa comúnmente para anclar visualmente las páginas de destino. Por lo general, sirve como máscara o telón de fondo para una ilustración. Alrededor del 90 % de las veces, el Blob se rellena con un degradado y se asienta en la capa más baja de un diseño”. . Sin duda, es uno de los patrones más comunes en el diseño web moderno. Pero, ¿cómo lo animamos?

Comenzamos creando un contenedor de efecto blob y también especificamos 3 elementos de intervalo individuales dentro del contenedor. Hacemos esto porque en realidad "dibujamos" el blob nosotros mismos usando una combinación de propiedades border y border-radius.

Para lograr el efecto variado, usamos nth-child para diseñar cada elemento individualmente. Si quiere ponerse divertido con él, siéntase libre de cambiar las propiedades de porcentaje para ajustar la apariencia de la mancha.

La animación en sí se logra mediante el uso de la propiedad transform: rotate() dentro de una especificación @keyframes . Lo configuramos de 0 a 360 grados porque esto nos da un efecto perpetuo. La superposición de colores se realiza a través de :hover y nos permite establecer un color de fondo personalizado. Y, además, también creamos un contenedor separado dentro del propio blob. Esto le da la posibilidad de diseñar partes individuales de su diseño de página para tener este efecto de animación específico.

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

Cambio de texto

Los efectos de animación generalmente se reservan para diseños web creativos. Y en este caso, este efecto de cambio de texto ayudará a crear una buena primera impresión para los visitantes de su sitio. Ideal para presentaciones de encabezados o, si se personaliza, se puede usar para mostrar las características del producto, etc.

Lo primero que hacemos es crear un contenedor para el efecto real. Después, especificamos una nueva clase div que contendrá la lógica de animación. En nuestro caso, usamos una duración de animación de 8 segundos, combinada con 3 especificaciones animation-delay separadas.

El retraso se usa para determinar cuándo aparecerá una palabra específica en la vista después de agregar nuestra lógica @keyframes .

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

Resaltar el cursor

Es cierto que este efecto específico no utiliza propiedades de animación concretas. Sin embargo, el uso de attr() y la función var() debería ser lo suficientemente inspirador como para intentar personalizar aún más este efecto.

Si observa la especificación ul li a::before , usamos attr() para especificar a qué elemento deseamos atribuir el efecto. Además, agregamos una variable llamada –clr que usa para establecer un color personalizado para cada elemento al que desea aplicar el efecto de desplazamiento.

Para este ejemplo, también hemos agregado la propiedad border-right para indicar qué color usamos para cada uno de los elementos. Puede eliminarlo y el efecto seguirá funcionando.

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }