Utilizando CSS Personalizado no Elementor

Apesar da vasta gama de recursos que o Elementor oferece, muitas vezes precisamos recorrer ao poder do CSS para implementar efeitos visuais únicos e tornar nossos sites ainda mais atraentes para a audiência. Neste guia prático, separei 8 scripts de movimento em CSS que, sem dúvida, irão embelezar suas páginas construídas com Elementor.

Uma das grandes vantagens do Elementor é a possibilidade de inserir CSS personalizado diretamente no editor. Portanto, você pode aproveitar essa funcionalidade para aplicar estilos específicos que não estão disponíveis nas opções padrão do plugin.

Entendendo a Base das Animações em CSS

Para criar essas animações, utilizamos principalmente a propriedade animation, que permite aplicar a animação a um elemento HTML. Ademais, a função cubic-bezier() é fundamental para definir a curva de aceleração dessa animação, controlando o ritmo e a suavidade do efeito. Além disso, a classe .infinite pode ser adicionada à animação para que ela se repita continuamente, criando um efeito constante.

Vamos aos Códigos de Animação!

1. Animação de Rotação Infinita

CSS

#elemento {
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Em resumo, este código CSS fará com que o elemento HTML com o ID #elemento execute uma rotação completa de 360 graus de forma contínua.

2. Animação de Mudança de Cor Contínua

CSS

#elemento {
  animation: color-change 1s ease-in-out infinite;
}
@keyframes color-change {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}

Similarmente, este snippet de CSS animará a cor de fundo do elemento #elemento, alternando entre vermelho, azul e verde em um ciclo infinito.

3. Animação de Transição de Escala Sem Fim

CSS

#elemento {
  animation: scale 1s ease-in-out infinite;
}
@keyframes scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

Por outro lado, este código aplicará uma animação de escala ao elemento #elemento, fazendo-o aumentar e diminuir de tamanho repetidamente.

4. Animação de Desvanecimento Progressivo (Fade In/Out)

CSS

#elemento {
  animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Consequentemente, o elemento #elemento terá sua opacidade alterada, criando um efeito de desvanecimento que se repete infinitamente.

5. Animação de Transição de Posição Horizontal Constante

CSS

#elemento {
  animation: move 1s ease-in-out infinite;
}
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

Nesse caso, o elemento #elemento se moverá horizontalmente 50 pixels para a direita e retornará à sua posição inicial em um loop contínuo.

6. Animação de Pulsar Suave

CSS

.pulse {
  animation: pulse 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Aqui, a classe .pulse pode ser aplicada a qualquer elemento HTML para criar um efeito de pulsação suave e contínuo, utilizando a função cubic-bezier para uma aceleração mais orgânica.

7. Animação de Tremor Sutil

CSS

.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes shake {
  0% {
    transform: translate(0);
  }
  10%, 90% {
    transform: translate(-5px, 0);
  }
  20%, 80% {
    transform: translate(5px, 0);
  }
  30%, 50%, 70% {
    transform: translate(-5px, 0);
  }
  40%, 60% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(0);
  }
}

Similarmente, a classe .shake proporcionará um efeito de tremor horizontal sutil e repetitivo ao elemento HTML aplicado, também com uma curva de aceleração personalizada.

8. Animação de Aparecimento Gradual com Delay

CSS

#meuElemento {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Finalmente, este código fará com que o elemento com o ID #meuElemento apareça gradualmente (fade in) após um atraso de 5 segundos. A propriedade animation-fill-mode: forwards; garante que o elemento permaneça visível ao final da animação.

Conclusão

Em suma, a combinação do poder do Elementor com a flexibilidade do CSS abre um leque de possibilidades para criar animações incríveis e personalizadas para o seu site. Experimente esses scripts e explore as diversas propriedades do CSS para levar o design do seu site a um novo nível!