10 Exemples d'animation sur CodePen que vous pouvez apprendre

CodePen est un endroit idéal pour trouver de l'inspiration et voir ce que les autres expérimentations UI fous sont à venir avec. En plus de cela, il est également un endroit utile pour trouver du contenu éducatif. Dans cette ronde nous allons explorer quelques exemples cool de CodePens qui nous enseignent tout sur l'animation web.

1. Fonctionnement des Keyframes

Ce CodePen illustre comment les navigateurs lisent la séquence d'étapes dans une animation de keyframe.

2. Performant CSS Animation pour débutants

Lorsque nous animons avec CSS, nous avons un vaste éventail de propriétés à animer. Cependant, tous ne sont pas une bonne idée. Animer les mauvaises propriétés peut faire des animations lentes, janky. Cet exemple d'Ian Hazelton explique comment les quatre propriétés les plus efficaces fonctionnent.

3. Démo d'animation d'images clés

Parfois, un exemple simple est tout ce dont vous avez besoin. Cet exemple montre comment la syntaxe from et to peut être utilisée dans un keyframe simple.

4. requestAnimationFrame Demo

Dans cette démonstration JavaScript de Matt West, voyez comment l'API requestAnimationFrame peut être utilisée pour jouer et mettre en pause.

5. Comment ChartJS

Une grande utilisation des commentaires en ligne qui démontrent comment créer deux graphiques animés à l'aide de ChartJS.

6. Guide de toile HTML5 pour les débutants

Un guide bien commenté sur l'utilisation de Canvas, par Petr Tichy.

7. Convertir GIF en animations CSS

Parfois, vous n'avez pas besoin d'un rendu GIF pour obtenir un effet d'animation de fantaisie. Ces exemples de CSS uniquement de Joey Cheng sont un exemple utile de ce qui est possible.

8. animateTransform Exemples

Chris Coyier montre comment utiliser SVG animateTransform.

9. Transformation CSS: Exemple 3D et TransitionEnd

Il est souvent utile de savoir quand une animation est terminée. Cette démonstration simple montre comment nous pouvons utiliser JavaScript pour dire quand une animation se termine.

10. Commutation des keyframes d'animation dans les requêtes de média

Encore un excellent pour signet–cet exemple montre comment nous pouvons changer les animations en utilisant des requêtes de media. Redimensionnez l'écran pour voir l'effet!

Bonus: CSS Motion Paths

Enfin, voyons l'avenir de l'animation SVG avec cette démonstration montrant comment la propriété motion-path nous permet de créer des chemins complexes de mouvement pour nos animations.

On a finis!

Ce ne sont là qu'une poignée de démos, de blogs et de tutoriels disponibles sur CodePen. CodePen n'est pas seulement génial pour l'animation cependant; essayez de chercher et vous trouverez toutes sortes de super info et démos couvrant toutes sortes de sujets de développement web. Explorez, apprenez et amusez-vous!

Plus de ressources d'animation

• Commencez avec l'animation Web
  
• Ajout d'un appel à vos animations sur le Web par votre sincèrement
  
• 9 cours populaires sur CSS Animation
• Nouveau cours court: un guide visuel de l'animation CSS par Kezz Bracey
• Facilité dans les fonctions cubiques de Bezier dans notre cours de pause-café de Guy Routledge