Animações CSS: introdução e exemplos

Os efeitos animados mais básicos em CSS podem ser obtidos por meio de propriedades como transform e transition . No entanto, o rascunho de trabalho do CSS Animations Level 1 fornece um ambiente mais complexo, utilizando as propriedades de animation e @keyframes para obter efeitos de animação perpétuos. Isto é melhor compreendido através de um exemplo definitivo.

Especificando regras de animação usando @keyframes

A regra @keyframes é usada para especificar o comportamento de animação que desejamos aplicar a um identificador de animação no layout da página. O identificador é especificado por meio animation-name ou usando a animation: name; forma abreviada.

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

Nesse contexto, o exemplo acima mudará a background-color de fundo de branco para preto durante a duração da animação. from refere-se ao início (0%) e to refere-se ao fim (100%). Assim, a regra também pode ser reescrita com valores percentuais.

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

Por si só, isso não fará nada, a menos que especifiquemos o elemento que desejamos animar. Além disso, você também precisa especificar animation-duration pois o valor padrão é 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; */ }

Podemos então chamar nosso contêiner usando um div e o resultado seria este:

Normalmente, a maioria das animações CSS escritas em CSS puro usa abreviação porque economiza a escrita de várias linhas da lógica da animação. Como tal, aqui está uma referência para valores de propriedade 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' */

Leitura adicional

Se você quiser aprender mais sobre animações CSS em profundidade, aqui estão meus recursos recomendados:

• Codrops CSS Reference – Esta é uma extensa referência escrita e organizada por Sara Soueidan (@SaraSoueidan) e contém exemplos detalhados de como certas propriedades CSS funcionam.
• Animações CSS MDN – Uma extensa introdução em estilo de documentação para animações CSS na página MDN Web Docs.
• Introdução ao cubic-bezier() – Um artigo aprofundado escrito por Temani Afif (@ChallengesCss) para CSS-Tricks sobre o uso da propriedade cubic-bezier() para criar animações CSS avançadas.

Exemplos de animações CSS

A melhor maneira de aprender qualquer coisa é através de exemplos. A seção a seguir é inteiramente dedicada a vários efeitos obtidos por meio de propriedades de animação CSS.

Uma última coisa! Muitas das animações de exemplo abaixo têm um pouco de código associado a elas, como tal, adicionei um estouro de altura máxima a este artigo para habilitar uma barra de rolagem. Você também pode passar o mouse sobre cada trecho de código e copiá-lo para a área de transferência para importar em seu editor de código.

Aceno

A animação de onda é criada desenhando primeiro um caminho SVG para um padrão de onda e, em seguida, atribuindo um ID a ele. Depois, especificamos quatro classes nth-child com variáveis ​​personalizadas animation-delay animation-duration . Cada variável representa uma onda individual dentro da animação e cada onda pode ser estilizada de forma independente.

A vantagem de definir o padrão com SVG é que o código se torna facilmente reutilizável.

Se você observar o caminho que desenhamos, especificamos quatro camadas diferentes para a onda (usando um eixo personalizado) e, em seguida, referenciamos o #wave-pattern id que definimos para o caminho inicial. É aqui que você também pode alterar a aparência da cor de cada onda.

 <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; } }

Carregando texto

Esse efeito de carregamento é relativamente fácil de implementar porque usa apenas algumas propriedades práticas de animação. Primeiro, você deseja especificar o valor content: attr() que você aplica ao elemento de texto que deseja animar. Depois, você especifica a animação em si, que no nosso caso é animation: loading 5s linear infinite; .

A duração do efeito de carregamento pode ser modificada alterando a propriedade 5s. E, por último, usamos @keyframes para chamar a animação de carregamento e alterar sua largura de 0% para 100% durante esse período de 5s. Quanto maior o valor da duração da animação, mais lento será o efeito de carregamento.

Os casos de uso específicos para uma animação como essa são efeitos de transição para carregamentos de página, mas também uma solução confiável para projetos de aplicativos quando você não deseja depender de nenhuma 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

Uma das primeiras coisas que você notará nesta animação é sua fluidez . Isso é possível porque usamos a função calc() para calcular matematicamente cada transição. Como escrevemos a animação em CSS puro, temos que usar vários elementos span para especificar cada letra consecutiva na animação.

Quanto a modificar a profundidade da onda, primeiro, você pode alterar a duração de 3s para um número menor ou maior. Maior significa que o efeito de onda será mais lento e vice-versa. E, dentro dos @keyframes , você pode alterar a especificação -24px para alterar a altura da onda.

Quanto maior o valor negativo, mais pronunciado o efeito 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); } }

Efeito de pulso / ondulação

Começamos criando um recipiente para o círculo ao qual desejamos aplicar o efeito. Isso é específico para a demonstração, mas você pode reutilizar o código para quaisquer outros elementos em sua página. Depois, criamos uma classe chamada .circle que servirá como o efeito cascata animado.

Duas propriedades notáveis ​​que usamos nesta classe são a opacity: 0.5; e animation: ease-out; . A opacidade é o que cria a ilusão de ter ondulações/pulso, e a transição facilitada faz com que essas ondulações saiam do recipiente original.

Em seguida, pegamos nossa classe .circle e aplicamos a ela a propriedade nth-of-type() . Para este exemplo, estamos usando 3 círculos individuais que saem do recipiente original. Dentro das chamadas do tipo n, aplicamos animation-delay com os valores de -0,5s;-1s;-1,5s. Quanto maior o valor negativo, mais tempo levará para que os efeitos sejam totalmente renderizados.

E, por último, aplicamos @keyframes à nossa animação de pulso especificada. Neste exemplo, utilizamos a propriedade transform: scale() . Isso define o tamanho dos pulsos para cada animação. Quanto maior o valor, maiores serão as ondulações de saída.

 <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)

A propriedade counter é fácil de ignorar porque normalmente você adiciona números a certos elementos manualmente. No entanto, é útil quando você deseja fazer atribuições aninhadas em profundidade para itens de menu ou grandes páginas de documentação.

Além disso, você pode montar um contador automatizado para os títulos das postagens do blog. Por exemplo, você está escrevendo uma revisão em várias ferramentas. E, o melhor de tudo, o balcão pode ser estilizado individualmente, dando-lhe mais liberdade de design.

Mas, para esta demonstração – estamos nos concentrando em usar a propriedade counter para criar um efeito de contador automatizado. Então, vamos nos aprofundar e entender como funciona. Para este exemplo, primeiro criamos um contêiner que conterá a animação do contador. Você pode personalizar isso como quiser. Em seguida, criamos nossa classe .count-numbers que inclui a sintaxe de animação, neste caso, animation: count-numbers 10s linear infinite forwards; .

Para resumir, especificamos o nome da nossa animação, definimos a duração para 10 segundos e definimos a direção da animação como normal porque não queremos que ela conte para trás a partir de 10. Embora você possa defini-la como alterne se desejar que seu contador conte para trás também.

Continuando, especificamos uma nova classe chamada .count-numbers::before que usamos para nomear nosso contador, neste caso, content: counter(count); . Isso é importante porque a próxima etapa é usar o counter-name para animar o efeito por meio de @keyframes .

O último passo é escrever nossas especificações para a animação renderizar. Em nossa demonstração, contamos de 1 a 10, então especificamos nosso valor @keyframes de 0% a 100% em incrementos de 10%. Cada incremento contém uma instrução counter-increment que também usa nosso counter-name: counter-increment: count 0; .

Assim, em 0% nosso incremento é definido como 0 e em 10% é definido como 1 para projetar o efeito de um contador.

Além disso, tente alterar o content: counter(count); especificação de conteúdo: counter(count, upper-roman); e veja o que acontece!

 <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; } }

Bola quicando

Começamos criando primeiro um container para nossa bola, neste caso, é .ball-container .

Em seguida, especificamos o tamanho da bola e o estilo de sua aparência usando uma combinação de cores de fundo e efeitos de sombra. Em nossa demonstração, optamos por um efeito mais brilhante, mas você pode modificá-lo de acordo com suas próprias necessidades. E, finalmente, especificamos a animação, neste caso, definimos uma duração para 5s e também aplicamos ease-in-out que significa que a transição tem um início e um fim lentos.

Depois que a bola é desenhada e a animação é definida, podemos escrever nossas regras @keyframes . Para obter o efeito de salto, usamos transform: translatey(); em incrementos de 50%, então 0% a 50% a 100%. A ênfase está em 50% porque aqui definimos a altura do salto especificando transform: translatey(-50px); – o bounce/float terá 50px de altura (em relação ao container). Quanto maior o número negativo, mais alto a bola vai quicar.

Da mesma forma, especificar um número menor reduzirá o tamanho da rejeição.

A última parte é adicionar uma sombra, embora você também possa removê-la, pois não terá efeito na própria animação da bola. A única diferença com a sombra é que usamos a propriedade transform: scale() para redimensionar a sombra em um contexto 2D. Definimos os valores de acordo com a escala de efeito que desejamos realizar.

 <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); } }

Coin Flip

O que eu amo nessa animação é que podemos definir um raio de rotação incrivelmente preciso para obter um efeito que parece que a moeda está realmente sendo lançada. Então, para começar, você precisará de 2 imagens (estou usando SVG para esta demonstração, mas fotos normais funcionam tão bem. Apenas certifique-se de aplicar a classe correta a cada imagem.) e defina-as como opacity: 0; . Definimos como 0 porque, mais tarde, usamos @keyframes para alterar sua opacidade para que as imagens entrem na visualização em determinadas posições durante a animação.

A classe .image-container é usada para especificar as dimensões das imagens dentro da moeda. Certifique-se de especificar isso também para as imagens reais, conforme mostrado no snippet abaixo. Em seguida, especificamos .coin-style que é a parte externa (a própria moeda). Tecnicamente, você pode definir isso como transparente, mas para uma demonstração, nós a tornamos visível.

O conceito principal para a classe .coin-style é a forma como adicionamos a animação, que neste caso é: animação: coin-flip 1,25s cubic-bezier(0,93, 0,05, 0,9, 0,71) infinito alternativo; .

O ponto de interesse é a especificação cubic-bezier() , que nos dá o efeito de curva rotativa para o recipiente de moedas. Isso é praticamente impossível de escrever por conta própria, então minha recomendação é usar qualquer ferramenta geradora para renderizar o efeito de curva desejado.

E por último, dentro de nossos @keyframes , aplicamos a função scaleX() para redimensionar a aparência da moeda no x-axis . Mesmo a menor alteração nos valores fornecidos (nesta demonstração) modificará a aparência do efeito “inverter”.

Acho que a implementação abaixo é o mais próximo possível da perfeição, mas talvez você possa fazer melhor!

 <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; } }

Deslize

Para fazer essa animação funcionar, usamos a animation: ease-out; função em combinação com um valor de posição negativo dentro @keyframes . Portanto, neste exemplo, especificamos 0% {opacity: 0;left: -700px;} que torna nosso elemento deslizante invisível no início, mas também posicionado 700px fora do contêiner.

Depois, especificamos 100% {opacity: 1;left: 0;} que, quando nossa animação terminar (definimos como 2 segundos), retornará a visibilidade normal e posicionará nosso elemento de volta à sua posição relativa.

Uma coisa interessante a notar é que esse efeito funciona em todas as direções.

Se você quiser alterar o efeito de slide-in para aparecer do lado direito, você precisa alterar o esquerdo:; valores à direita:; e vice-versa para posições como superior e inferior. Você também pode atrasar a animação ajustando quanto tempo leva para o elemento deslizar.

Um valor mais alto retardará a animação.

 <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; } }

Efeito Blob

Em primeiro lugar, o que diabos é um Blob? Como disse Ian Latchmansingh, “O Blob é uma forma amorfa e pseudo-orgânica que é comumente usada para ancorar visualmente as páginas de destino. Geralmente serve como máscara ou pano de fundo para uma ilustração. Cerca de 90% das vezes o Blob é preenchido com um gradiente e fica na camada mais baixa de um design.” . Certamente é um dos padrões mais comuns no web design moderno. Mas, como o animamos?

Começamos criando um contêiner de efeito blob e também especificamos 3 elementos span individuais dentro do contêiner. Fazemos isso porque nós mesmos “desenhamos” o blob usando uma combinação de propriedades border e border-radius.

Para obter o efeito variado, usamos nth-child para estilizar cada elemento individualmente. Se você quiser se divertir com isso, sinta-se à vontade para alterar as propriedades de porcentagem para ajustar a aparência do blob.

A animação em si é obtida usando a propriedade transform: rotate() dentro de uma especificação @keyframes . Definimos de 0 a 360 graus porque isso nos dá um efeito perpétuo. A sobreposição de cores é feita através de :hover e nos permite definir uma cor de fundo personalizada. E, além disso, também criamos um contêiner separado dentro do próprio blob. Isso permite que você estilize partes individuais do layout da página para ter esse efeito de animação 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; }

Troca de texto

Os efeitos de animação são normalmente reservados para web designs criativos. E, nesse caso, esse efeito de troca de texto ajudará a criar uma primeira impressão forte para os visitantes do seu site. Ideal para apresentações de cabeçalho, ou se personalizado – pode ser usado para mostrar recursos do produto, etc.

A primeira coisa que fazemos é criar um container para o efeito real. Depois, especificamos uma nova classe div que conterá a lógica da animação. No nosso caso, usamos uma duração de animação de 8s, combinada com 3 especificações animation-delay separadas.

O atraso é usado para determinar quando uma palavra específica entrará na exibição após adicionarmos nossa 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; } }

Destaque ao passar o mouse

É certo que esse efeito específico não usa propriedades de animação concretas. No entanto, o uso de attr() e da função var() deve ser inspirador o suficiente para tentar personalizar ainda mais esse efeito.

Se você observar a especificação ul li a::before – usamos attr() para especificar a qual elemento desejamos atribuir o efeito. Além disso, adicionamos uma variável chamada –clr que você usa para definir uma cor personalizada para cada item que deseja aplicar o efeito de foco.

Para este exemplo, também adicionamos a propriedade border-right para indicar qual cor usamos para cada um dos elementos. Você pode removê-lo e o efeito ainda funcionará.

 <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)) }