10 Exemplos de Animação no CodePen das Quais Podemos Aprender

CodePen é um ótimo lugar de inspiração onde vemos UI experimentais loucas que outros realizam. Além disso, é um lugar útil para encontrar conteúdo educacional. Nesse resumo, exploraremos alguns exemplos legais do CodePen que nos ensinam sobre animação web.

1. Como Keyframes Funcionam

Esse CodePen ilustra como navegadores leem pela sequência de passos na animação keyframe.

2. Animação CSS Performática para Iniciantes

Quando animamos com CSS, temos várias propriedades a usar. Contudo, nem todas fazem sentido. Animar as propriedades erradas gera animações lentas e quebradas. Esse exemplo do Ian Hazelton explicar como as quatro propriedades mais eficientes funcionam.

3. Demo de Animação com Keyframes

Por vezes, um exemplos simples é o que precisamos. Esse exemplo mostra como a sintaxe from e to pode ser usada em um keyframe.

4. Demonstração de requestAnimationFrame

Nessa demo de JavaScript do Matt West, vejamos como a API de requestAnimationFrame pode ser usada para executar e pausar.

5. Usando ChartJS

Um ótimo uso de comentários em linha demonstrando como criar dois gráficos animados usando ChartJS.

6. Guia de Canvas do HTML5 para Iniciantes

Um guia bem comentado sobre o uso do Canvas, por Petr Tichy.

7. Convertendo GIG em Animações CSS

Algumas vezes, não precisamos de GIF para obter efeitos de animação legais. Esses exemplos só com CSS, de Joey Cheng, são úteis para mostrar as possibilidades.

8. Exemplos de animateTransform

Chris Coyier demonstra o uso de animateTransform com SVG.

9. CSS Transforms: Exemplo em 3D e TransitionEnd

Geralmente é util saber quando uma animação termina. Essa simples demo mostra como podemos usar JavaScript para avisar quando uma animação termina.

10. Usando Media Queries com Animação de Keyframes

Outro para favoritar–esse exemplo mostra como podemos mudar animações usando consultas de mídia. Redimensionemos a tela para ver o efeito!

Bônus: Caminhos de Movimentação do CSS

Por último, vejamos o futuro da animação SVG com essa demo mostrando como a propriedade motion-path permite-no criar caminhos de movimentação complexos para animações.

Resumindo!

Esses são apenas algumas demos, blogs e explicações no CodePen. Ele não é bom só para animação. Navegando por lá, encontraremos muita informação e demos cobrindo vários tópicos de desenvolvimento web. Explorar, aprender e se divertir!

Mais Recurso sobre Animação

• Começando com Animação Web
  
• Adicionando Atração às Animações na Web, por escreve que vos escreve
  
• 9 Cursos Populares sobre Animação CSS
• Novo Curso Rápido: Guia Visual de Animação CSS por Kezz Bracey
• Funções de Temporização Ease In e Cubic Bezier no Curso de Parada para Café por Guy Routledge