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.

1 - 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)
Ficou com alguma dúvida?