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
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 120 aulas
- 4 projetos
- 9h 45min
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
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Como fazer um select mudar de URL/link
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
