CSS para Elementor, Geral

Os melhores Códigos de CSS para você usar no ELEMENTOR

realizando análise…

Apesar do Elementor ser muito completo, é muito comum termos que recorrer ao CSS para implementar algum efeito e deixar nosso site mais atrativo para nosso público.

Eu separei alguns Scripts de movimento que certamente irão embelezar ainda mais a sua página.

Use o CSS personalizado do Elementor: O Elementor permite que você crie seu próprio CSS personalizado dentro do editor. Use isso para estilos específicos que não estão incluídos nos recursos padrão do Elementor.

A propriedade animation é utilizada para aplicar a animação ao elemento, e a função cubic-bezier() é utilizada para definir a curva de aceleração da animação. A classe .infinite pode ser adicionada à animação para fazê-la executar infinitamente.

Vamos lá!

01. Animação de rotação:

#elemento {
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Este código animará o elemento com uma rotação infinita.

02. Animação de mudança de cor:

#elemento {
  animation: color-change 1s ease-in-out infinite;
}

@keyframes color-change {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}

Este código animará o elemento com uma mudança de cor infinita.

03. Animação de transição de escala:

#elemento {
  animation: scale 1s ease-in-out infinite;
}

@keyframes scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

Este código animará o elemento com uma transição de escala infinita.

04. Animação de desvanecimento:

#elemento {
  animation: fade 1s ease-in-out infinite;
}

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Este código animará o elemento com um efeito de desvanecimento infinito.

05. Animação de transição de posição:

#elemento {
  animation: move 1s ease-in-out infinite;
}

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

Este código animará o elemento com uma transição de posição infinita.

06. Animação de Pulsar:

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

Neste exemplo, a classe .pulse é aplicada ao elemento HTML que se deseja fazer pulsar. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de pulsação é criado utilizando a propriedade transform e diferentes valores de scale.

07. Animação de Piscar:

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

Neste exemplo, a classe .shake é aplicada ao elemento HTML que se deseja fazer tremer. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de tremer é criado utilizando a propriedade transform e diferentes valores de translate.

08. Mostrar elemento depois de um tempo (Fade)

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Neste exemplo, estamos aplicando a animação fadeIn ao elemento com o ID meuElemento. A animação tem uma duração de 1 segundo e um atraso de 5 segundos antes de começar.

A propriedade animation-fill-mode é definida como forwards para manter o elemento com uma opacidade de 1 após a animação ter terminado. A animação fadeIn é definida com @keyframes, que define os valores de opacidade do elemento de 0 a 1 durante a duração da animação.