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 en savoir plus sur la théorie derrière ces recommandations, et le guide des animations pour obtenir des conseils pratiques.
Chargement de l'animation de l'assistant
Afficher l'animation de chargement de l'assistant sur CodePen
Cette animation de chargement est entièrement créée avec CSS. L'image et toute l'animation ont été créées en CSS et en HTML, sans images ni JavaScript. Pour comprendre comment il a été créé et quelles sont ses performances, vous pouvez utiliser les outils pour les développeurs Chrome.
Inspecter l'animation avec Chrome DevTools
Lorsque l'animation est en cours d'exécution, 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 ou de peinture 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 et 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 la transformation de la boîte de l'élément pendant son voyage dans les airs, lorsqu'il tourne, puis revient à la position de départ.
L'élément étant toujours sélectionné, regardez le panneau "Styles". Vous pouvez y voir le 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é et utiliser 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 CSS suivante,
animation: path_triangle 10s ease-in-out infinite;
Dans les outils pour les développeurs Chrome, vous pouvez trouver les clés-images en faisant défiler le panneau "Style".
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 des animations, qui n'entraîne pas d'opérations de mise en page ou de peinture par le navigateur (qui sont les principales causes des animations lentes).
@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 pour les développeurs Firefox
Une fois l'animation lancée, 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 ne devriez voir aucune entrée pour Recalculer le style. Vous savez maintenant que cette animation ne provoque pas de recalcul de style, et donc d'opérations de mise en page et de peinture.
Dans Firefox DevTools, inspectez le cercle pour comprendre le fonctionnement de cette animation.
Le <div> avec une classe de pulsating-circle marque la position du cercle, mais ne le dessine pas 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 au-delà 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 de développement Firefox. Une visualisation des animations utilisées et des propriétés animées s'affiche alors.
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 petits détails n'affectent pas les performances globales de votre application.
Sphère 3D CSS pure
Afficher une sphère en 3D au format CSS pur 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 et sélectionnez l'un des éléments avec une classe de plane.
La sphère est constituée d'un ensemble de plans et de rayons rotatifs.
Ces plans et ces 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 traduire.
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 impliqué dans la création de cette animation a consisté à bien régler le 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 efficaces.
Pour voir les performances de cette animation, ouvrez les outils pour les développeurs Chrome et enregistrez les performances pendant son exécution. Après le chargement initial, l'animation ne déclenche pas Layout ni Paint, et s'exécute correctement.
Conclusion
Ces exemples montrent comment animer quelques propriétés à l'aide de méthodes performantes peut créer des animations très intéressantes. Par défaut, les méthodes performantes décrites dans le guide Animations vous permettent de consacrer votre temps à la création de l'effet souhaité, avec moins de préoccupations concernant la lenteur de la page.