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.

65

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)
Suporte ao aluno - Deixe a sua dúvida.
FAÇA PARTE DESSE TIME
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
GRÁTIS
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
FAÇA PARTE DESSE TIME
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
GRÁTIS
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar