O projeto está inativo

Textos animados com CSS animation e keyframes

Neste exemplo veremos como criar animações com CSS utilizando para isso o recurso de animation com keyframes. Com eles podemos criar telas de carregamento, botões e banners animados.

79

Animate CSS: Apresentação do projeto

Vamos falar sobre Animate CSS, como criar animações com CSS utilizando para isso o recurso de animation com keyframes.

Neste vídeo veremos as animações que serão desenvolvidas neste exemplo. Aqui utilizaremos principalmente HTML e CSS (responsável pelas animações), com o auxílio do JavaScript para tratar o evento de clique em um dos exemplos.

Nas Figuras 1, 2 e 3 podemos ver os efeitos que serão desenvolvidos. No primeiro caso temos uma animação que é executada infinitamente, a segunda ocorre quando passamos o mouse sobre a div e a terceira ocorre quando clicamos sobre o texto.

Figura 1. Primeira animação (infinita)
Figura 1. Primeira animação (infinita)
Figura 2. Segunda animação (mouseover)
Figura 2. Segunda animação (mouseover)
Figura 3. Terceira animação (clique)
Figura 3. Terceira animação (clique)
Chega de perder tempo!
Comece hoje mesmo a programar de verdade
Apenas 12x de R$ 54,90
Por que a DevMedia?
  • Didática focada no iniciante
  • Aprenda construindo projetos reais
  • Domine as tecnologias mais usadas no mercado
  • Professores online o tempo todo
  • + de 8000 exercícios gamificados
  • + de 100 mil alunos formados

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar