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 découvrir la théorie sous-jacente de ces recommandations, et le guide d'animations pour obtenir des conseils pratiques.
Animation de chargement de l'assistant
Afficher l'animation de chargement de l'assistant sur CodePen
Cette animation de chargement est entièrement conçue en CSS. L'image et toutes les animations ont été créées en CSS et en HTML, pas d'image ni de JavaScript. Pour comprendre comment il a été créé et évaluer ses performances, vous pouvez utiliser les outils pour les développeurs Chrome.
Inspecter l'animation à l'aide des outils pour les développeurs Chrome
Ouvrez l'onglet "Performances" dans les outils pour les développeurs Chrome et enregistrez quelques secondes de l'animation. Vous devriez voir dans le résumé que le navigateur n'effectue aucune opération Layout ou Paint lors de l'exécution de cette animation.
Pour savoir comment cette animation a été réalisée sans entraîner de mise en page ni de dessin, 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 zone contenant l'élément se transforme pendant son voyage dans les airs, pendant qu'elle tourne, puis revient à sa position de départ.
L'élément étant toujours sélectionné, regardez le panneau "Styles". Vous pouvez voir le code CSS qui dessine la forme du triangle, ainsi que l'animation utilisée.
Comment ça marche ?
Le triangle est créé à l'aide du pseudo-élément ::after pour ajouter du contenu généré, à l'aide de 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 CSS suivante :
animation: path_triangle 10s ease-in-out infinite;
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 verrez alors que l'animation est créée en utilisant 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 des animations. Elle n'entraîne pas d'opérations de mise en page ou de peinture (principales causes de lenteur 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. Vous obtenez ainsi une animation complexe qui se déroule sans accroc.
Cercle clignotant
Afficher un 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 pour les développeurs Firefox.
Inspecter l'animation avec les Outils pour les développeurs Firefox
Ouvrez l'onglet "Performances" dans les outils pour les développeurs Firefox et enregistrez quelques secondes de l'animation. Arrêtez l'enregistrement. Dans la cascade, vous devriez constater 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 des opérations de mise en page et de peinture.
En restant dans les outils pour les développeurs Firefox, inspectez le cercle pour voir comment fonctionne cette animation.
L'élément <div> avec une classe de pulsating-circle marque la position du cercle, mais il 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 réalisés à l'aide des pseudo-éléments ::before et ::after.
L'élément ::before crée l'anneau opaque qui s'étend en dehors 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;
}
}
Pour voir quelles propriétés sont animées, vous pouvez également sélectionner le panneau Animations dans les outils pour les développeurs Firefox. Une visualisation des animations utilisées et des propriétés qu'elles utilisent s'affiche.
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 augmenter 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 de ce type peut être utilisée à différents endroits de votre application. Il est important que ces petits gestes n'affectent pas les performances globales de votre application.
Sphère 3D CSS pure
Afficher une sphère 3D CSS pure sur CodePen
Cette animation semble incroyablement compliquée, 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, puis sélectionnez l'un des éléments avec une classe de plane.
Cette sphère est constituée d'un ensemble de plans et de rayons rotatifs.
Ces plans et rayons se trouvent à l'intérieur d'un wrapper <div>, et c'est cet élément qui pivote à 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 peuvent être imbriqués dans les éléments plane et spoke. Ils utilisent une animation qui utilise la transformation pour les mettre à l'échelle et les traduire.
Cela crée un effet de clignotement.
.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 nécessaire à la création de cette animation a consisté à trouver le bon timing afin de 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.
Pour voir les performances de cette animation, ouvrez les Outils pour les développeurs Chrome et enregistrez 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 correctement.
Conclusion
Ces exemples vous montrent comment l'animation de quelques propriétés à l'aide de méthodes performantes permet de créer des animations très intéressantes. En utilisant par défaut les méthodes performantes décrites dans le guide des animations, vous pouvez consacrer votre temps à créer l'effet souhaité sans vous soucier de ralentir la page.