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