10 Exemplos de Animação no CodePen das Quais Podemos Aprender
Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
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