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 d'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 l'assistant Vue 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 il a été créé et ses performances, vous pouvez utiliser les outils pour les développeurs Chrome.
Inspecter l'animation avec Chrome DevTools
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.
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 de développement 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 regardez comment la boîte de l'élément se transforme pendant son voyage dans les airs, lorsqu'elle tourne, puis lorsqu'elle revient à la position de départ.
Laissez l'élément sélectionné et examinez le panneau "Styles". Vous y trouverez 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 CSS suivante :
animation: path_triangle 10s ease-in-out infinite;
Dans les outils de développement Chrome, vous pouvez trouver les images clés en faisant défiler le panneau de style vers le bas.
Vous y verrez 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'oblige pas le navigateur à effectuer des opérations de mise en page ou de peinture (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. Il en résulte une animation complexe qui s'exécute de manière fluide.
Cercle pulsant
Afficher le cercle pulsant 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 constater qu'il n'y a aucune entrée pour Recalculate Style. Vous savez maintenant que cette animation n'entraîne pas de recalcul de 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.
Le <div> avec une classe de pulsating-circle marque la position du cercle, mais ne dessine pas le 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 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. Vous verrez ensuite 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 petits détails n'aient pas d'incidence sur les performances globales de votre application.
Sphère 3D en CSS pur
Voir 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 avec une classe plane.
La 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 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 les met à l'échelle et les déplace à l'aide d'une transformation.
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);
}
}
Pour créer cette animation, il a fallu trouver le bon timing et créer l'effet de rotation et de pulsation. Les animations en 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 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.