Dans cet article, découvrez comment certaines animations populaires trouvées sur CodePen ont été créées. Ces animations utilisent toutes les techniques performantes décrites dans d'autres articles de cette section.
Consultez Pourquoi certaines animations sont-elles lentes ? pour comprendre la théorie derrière ces recommandations, et le guide des animations pour obtenir des conseils pratiques.
Animation de chargement de l'assistant
Voir l'animation de chargement de l'assistant 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 HTML, sans images ni JavaScript. Pour comprendre comment elle a été créée 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'animation, ouvrez l'onglet "Performance" (Performances) dans les outils pour les développeurs Chrome et enregistrez quelques secondes de l'animation. Dans le résumé, 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.
Pour découvrir comment cette animation a été réalisée sans provoquer de mise en page ni de peinture, inspectez l'un des éléments en mouvement dans les outils pour les développeurs Chrome. Vous pouvez utiliser le panneau "Animations" pour localiser les différents éléments animés. Cliquez sur un élément pour le mettre en surbrillance dans le DOM.
Par exemple, sélectionnez le triangle et observez comment la boîte de l'élément se transforme pendant son déplacement dans les airs, lorsqu'il tourne, puis revient à sa position de départ.
L'élément étant toujours sélectionné, examinez le panneau "Styles". Vous pouvez y voir le code CSS qui dessine la forme du triangle et l'animation utilisée.
Fonctionnement
Le triangle est créé à l'aide du pseudo-élément ::after pour ajouter du contenu généré, en utilisant des bordures pour créer la forme.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
L'animation est ajoutée avec la ligne de code CSS suivante :
animation: path_triangle 10s ease-in-out infinite;
Toujours dans les Outils pour les développeurs Chrome, vous pouvez trouver les images clés en faisant défiler le panneau "Style" vers le bas.
Vous constaterez que l'animation est créée à l'aide de transform pour modifier la position de l'élément et le faire pivoter.
La propriété transform est l'une des propriétés décrites dans le guide sur les animations, qui n'entraîne pas d'opérations de mise en page ou de peinture dans le navigateur (qui sont les principales causes de ralentissement des animations).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Chacune des différentes parties mobiles de cette animation utilise des techniques similaires. Le résultat est une animation complexe qui s'exécute de manière fluide.
Cercle clignotant
Afficher le cercle clignotant sur CodePen
Ce type d'animation est parfois utilisé pour attirer l'attention sur un élément d'une page. Pour comprendre l'animation, vous pouvez utiliser les outils de développement Firefox.
Inspecter l'animation avec les outils de développement Firefox
Pendant l'exécution de l'animation, ouvrez l'onglet "Performances" dans les outils de développement Firefox et enregistrez quelques secondes de l'animation. Arrêtez l'enregistrement. Dans la cascade, vous devriez voir qu'il n'y a aucune entrée pour Recalculate Style (Recalculer le style). Vous savez maintenant que cette animation n'entraîne pas de recalcul du style, et donc pas d'opérations de mise en page et de peinture.
Dans les outils de développement Firefox, inspectez le cercle pour voir comment fonctionne cette animation.
L'élément <div> avec une classe pulsating-circle marque la position du cercle, mais ne dessine pas de cercle lui-même.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Le cercle visible et les animations sont obtenus à l'aide des pseudo-éléments ::before et ::after.
L'élément ::before crée l'anneau opaque qui s'étend à l'extérieur du cercle blanc, à l'aide d'une animation appelée pulse-ring, qui anime transform: scale et opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Une autre façon de voir quelles propriétés sont animées consiste à sélectionner le panneau Animations dans les outils de développement Firefox. Vous verrez alors une visualisation des animations utilisées et des propriétés animées.
Le cercle blanc lui-même est créé et animé à l'aide du pseudo-élément ::after.
L'animation pulse-dot utilise transform: scale pour agrandir et réduire le point pendant l'animation.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Une animation comme celle-ci peut être utilisée à différents endroits de votre application. Il est important que ces petites touches n'affectent pas les performances globales de votre application.
Sphère 3D en CSS pur
Afficher la sphère 3D en CSS pur sur CodePen
Cette animation semble incroyablement complexe, mais elle utilise des techniques que nous avons déjà vues dans les exemples précédents. La complexité vient de l'animation d'un grand nombre d'éléments.
Ouvrez les Outils pour les développeurs Chrome et sélectionnez l'un des éléments de la classe plane.
La sphère est composée d'un ensemble de plans et de rayons rotatifs.
Ces plans et rayons se trouvent dans un wrapper <div>, et c'est cet élément qui tourne à l'aide de transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
Les points sont imbriqués dans les éléments plane et spoke. Ils utilisent une animation qui utilise la transformation pour les mettre à l'échelle et les déplacer.
Cela crée l'effet de pulsation.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
Le travail de création de cette animation a consisté à trouver le bon timing pour créer l'effet de rotation et de pulsation. Les animations elles-mêmes sont assez simples et utilisent des méthodes très performantes.
Vous pouvez voir les performances de cette animation en ouvrant les outils pour les développeurs Chrome et en enregistrant les performances pendant l'exécution. Après le chargement initial, l'animation ne déclenche pas de mise en page ni de peinture, et s'exécute de manière fluide.
Conclusion
Ces exemples montrent comment l'animation de quelques propriétés à l'aide de méthodes performantes peut créer des animations très intéressantes. En utilisant par défaut les méthodes performantes décrites dans le guide sur les animations, vous pouvez consacrer votre temps à créer l'effet souhaité, sans trop vous soucier de ralentir la page.