Dans cet article, découvrez comment certaines animations populaires sur CodePen ont été créées. Ces animations utilisent toutes les techniques performantes décrites dans les autres articles de cette section.
Consultez Pourquoi certaines animations sont-elles lentes ? pour en savoir plus sur la théorie qui sous-tend ces recommandations, et le Guide des animations pour obtenir des conseils pratiques.
Animation de chargement de l'assistant
Afficher l'animation de chargement de View Wizard sur CodePen
Cette animation de chargement est entièrement créée avec CSS. L'image et l'animation ont été créées en CSS et en HTML, sans images ni JavaScript. Pour comprendre comment il a été créé et ses performances, vous pouvez utiliser les outils pour les développeurs Chrome.
Inspecter l'animation avec les Outils pour les développeurs Chrome
Pendant l'exécution de l'animation, ouvrez l'onglet "Performances" dans les outils pour les développeurs Chrome et enregistrez quelques secondes de l'animation. Dans le récapitulatif, vous devriez voir que le navigateur n'effectue aucune opération de mise en page ni de peinture lors de l'exécution de cette animation.