Dans cet article, vous allez découvrir comment ont été créées certaines animations populaires sur CodePen. Ces animations utilisent toutes les techniques performantes décrites dans d'autres articles de cette section.
Consultez la section Pourquoi certaines animations sont-elles lentes ? pour en savoir plus sur la théorie sous-jacente. suivez ces recommandations, ainsi que le Guide des animations pour obtenir des conseils pratiques.
Chargement de l'animation dans l'assistant
Afficher l'animation de chargement de l'assistant sur CodePen
Cette animation de chargement est entièrement conçue avec CSS. L'image et toute l'animation ont été créées en CSS et HTML, ni image, 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 les outils pour les développeurs Chrome
Une fois l'animation 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ésumé, 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.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Pour savoir comment cette animation a été réalisée sans entraîner de mise en page et de peinture, pour inspecter les é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. cliquer sur un élément pour le mettre en surbrillance dans le DOM.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Par exemple, sélectionnez le triangle, et observer comment la boîte de l'élément se transforme au cours de son voyage dans les airs, puis revient à sa position de départ.
<ph type="x-smartling-placeholder">L'élément étant toujours sélectionné, regardez le panneau "Styles". Vous pouvez voir ici 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é.
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;
En restant dans les outils pour les développeurs Chrome, vous pouvez trouver les images clés en faisant défiler le panneau "Style".
Vous constaterez que l'animation a été 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,
qui n'oblige pas le navigateur à effectuer des opérations de mise en page ou de peinture (qui sont les causes principales 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. Vous obtenez ainsi une animation complexe qui se déroule 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 en cours d'exécution, ouvrez l'onglet "Performances" dans les outils pour les développeurs Firefox et enregistrez quelques secondes de l'animation. Arrêtez l'enregistrement. la cascade d'annonces ne devrait afficher aucune entrée 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.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Restez dans les outils de développement Firefox, inspectez le cercle pour voir comment cette animation fonctionne.
Le <div> avec une classe de pulsating-circle marque la position du cercle,
mais elle ne dessine pas de cercle elle-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 le cercle 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;
}
}
Vous pouvez également afficher les propriétés animées en sélectionnant le panneau Animations dans les outils pour les développeurs Firefox. Vous verrez ensuite une visualisation des animations utilisées, et les propriétés animées.
<ph type="x-smartling-placeholder">Le cercle blanc 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 comme celle-ci pourrait ê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 pur
Afficher une sphère en 3D au format CSS pur sur CodePen
Cette animation semble incroyablement compliquée, Toutefois, il 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 rayons et de plans en rotation.
Ces plans et spokes se trouvent dans un wrapper <div>,
et c'est cet élément qui effectue une rotation à 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 se trouvent dans les éléments plane et spoke.
ils utilisent une animation qui utilise
Transform pour les mettre à l'échelle et les traduire.
Cela crée un effet clignotant.
.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 été de trouver le bon timing, pour créer un effet clignotant et clignotant. 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 son exécution. Après le chargement initial, l'animation ne déclenche plus la mise en page ni la fonctionnalité Paint. et fonctionne correctement.
Conclusion
Grâce à ces exemples, vous pouvez voir comment l'animation de 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 des animations sont utilisées. vous pouvez consacrer votre temps à la création de l'effet que vous souhaitez, avec moins d'inquiétudes concernant la lenteur de la page.