Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
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.

44

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.
Assinatura Devmedia
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
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
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!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.