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)
Comunidade DevMedia
Entre na turma de julho e receba a caneca exclusiva
487 vagas disponíveis para julho
Por 12x de R$ 54,90
selo qualidade DevMedia selo qualidade DevMedia
Por que a DevMedia?
  • Acesso completo
  • Projetos reais
  • Professores online
  • Exercícios gamificados
  • Certificado de autoridade
selo qualidade DevMedia

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

Aceitar