Animação basica em CSS3

Escrito por

Recentemente eu estava planejando e desenvolvendo a interface para o curso de Socket.io, e como ela terá algumas animações à medida em que os dados chegam em tempo real, resolvi voltar a estudar CSS3, algo que há tempos não utilizo.

Às vezes ficamos focando em um navegador mais novo e esquecemos que algumas coisas podemos utilizar sem o Javascript, apenas com CSS. Vou criar uma pequena página HTML, um pouco de CSS e Javascript apenas para poder controlar a class:

1.hello{
2 border:2px solid grey;
3 transition: all 3s;
4}
5.hello-active{
6 border:2px solid red;
7 background: grey;
8}
9<body>
10 <div class="hello">
11 Olá!
12 </div>
13 <script>
14 const node = document.querySelector('.hello')
15 node.addEventListener('click', function(){
16 this.classList.add('hello-active');
17 })
18 </script>
19</body>

O que o transition faz? Ele fala basicamente assim, "qualquer transição que você fizer envolvendo essa classe vai ter uma animação de X segundos". Apenas a propriedade transition já é possível fazer muita coisa.

No caso acima, ao clicar, a borda grey muda para red e o background grey em uma transição que dura 3 segundos. Também podemos fazer uma animação 'ao contrário', fazendo ele voltar ao estado original adicionando ao script a seguinte linha:

1<script>
2 const node = document.querySelector('.hello')
3 node.addEventListener('click', function(){
4 this.classList.add('hello-active');
5 })
6 node.addEventLiestener('transitionend', function(){
7 this.classList.remove('hello-active');
8 })
9</script>

O evento transitionend faz com que, ao terminar o tempo determinado, remova do classList a class. Isso faz com que o CSS volte ao seu estado inicial em uma transição de 'vai e volta'. Podemos também adicionar animação em hover:

1.hello.hover{
2 background: green;
3}

Como grande parte dos navegadores suporta CSS3 atualmente, conseguimos fazer tudo com ele, pelo menos para alguns tipos de aplicativos. Tudo isso utilizando apenas o transition, sem precisar utilizar Jquery. Confira os detalhes no vídeo:

Não perca nenhuma atualização. Cadastre seu e-mail, curta o DevPleno no Facebook e inscreva-se no canal. Deixe suas dúvidas e sugestões nos comentários.

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium