Efeito de tremer com CSS (tremendo elemento)

Neste artigo vamos aprender a fazer um efeito de tremer com CSS de uma forma simples e fácil, para você utilizar essa animação em sua página web.

Fala programador(a), beleza? Bora aprender a fazer um elemento tremer com CSS puro!

Primeiramente vou explicar a ideia por trás do problema

Nós vamos utilizar a animation do CSS, com um auxílio de keyframes para mapear o efeito de tremer

Ou seja, até onde ele vai para a esquerda e também para a direita

Ideia explicada, vamos a um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Efeito de tremer com CSS</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="vai-tremer"></div>
</body>
</html>

Aqui temos a estrutura básica de um HTML, com uma div de id vai-tremer, que é onde executaremos o efeito

E agora o CSS necessário para tremer o elemento:

#vai-tremer {
    /* apenas para dar um formato a div */
    width: 100px;
    height: 100px;
    background-color: darkred;
    /* animacao */
    animation: tremer .2s;
    animation-iteration-count: 4;
}

/* keyframe para ajustar até onde treme */
@keyframes tremer {
    0% {margin-left: 0;}
    25% {margin-left: 7px;}
    50% {margin-left: 0;}
    75% {margin-left: -7px;}
    100% {margin-left: 0;}
}

Primeiras três linhas foram destinadas ao formato da div, então você pode inserir conforme seu elemento

Depois criamos a animação tremer, com a regra animation, com um tempo de .2s, para dar um efeito mais rápido quando treme

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Você pode inserir qualquer tempo aqui, mas quanto mais rápido mais o efeito de tremer fica melhor

Na propriedade animation-iteration-count inserimos quantas vezes a animação deve ocorrer, neste caso 4

Por fim os keyframes, note que determinamos que eles sejam atrelados a animação tremer, criada anteriormente

Crimos 5 passos que mexem nas margins do elemento, jogando ele de um lado para o outro em -7px e 7px, isso dará as delimitações de onde o elemento deve tremer

Deste jeito criando um efeito rápido e harmônico

E é assim que criamos uma animação de tremer no HTML com apenas CSS! 🙂

Conclusão

Neste artigo vimos como fazer o efeito de tremer com CSS

Primeiramente criamos a animação tremer, com a regra animation no elemento alvo

Depois utilizamos keyframes para dar os ‘passos’ da animação, fazendo assim um efeito conciso

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube