Les animations et les transitions sont une partie importante de la conception des sites web. L’ajout d’animations subtiles à votre page web la rendra plus attrayante. Des animations simples telles que des icônes animées, une typographie cinétique et des logos animés peuvent contribuer à améliorer l’expérience de l’utilisateur. Découvrez cinq astuces d’animation géniales qui peuvent vous aider à animer votre site web.
1. Transformer un élément au survol
L’une des pratiques courantes en matière de conception consiste à disposer d’un élément qui s’agrandit lorsqu’on interagit avec lui. Par exemple, vous pourriez vouloir transformer des boutons un peu vers le haut lorsque quelqu’un passe la souris dessus. Vous pouvez y parvenir à l’aide de la feuille de style CSS transformer propriété.
En supposant que vous ayez un bouton :
<button>
Click me
</button>
Vous avez stylé le corps du document ainsi que le bouton :
/* Aligns the button to the center of the page */
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: black;
}
/* Styles the button */
button {
padding: 1em 2em;
background: blue;
border: 0;
color: white;
border-radius: 0.25rem;
cursor: pointer;
font-size: 2rem;
transition: transform 500ms;
}
/* Hover states */
button:hover,
button:focus {
transform: translateY(0.75rem) 500ms;
}
Dans le dernier bloc, vous définissez les états « hover » et « focus » du bouton. Dans les deux cas, vous translatez le bouton de 0,75rem le long de l’axe Y. Le bouton ressemblerait à ceci Le bouton ressemblerait à ceci :
Lorsque vous passez la souris sur le bouton, celui-ci se déplace vers le haut. La transition dure une demi-seconde (500 ms). Il s’agit d’un modèle que vous pouvez appliquer non seulement à vos boutons, mais aussi à d’autres éléments (par exemple, des images).
2. Déclarer plusieurs images-clés avec une seule déclaration
Un autre modèle courant dans les animations CSS consiste à itérer plusieurs fois sur la même valeur. Il peut s’agir d’une couleur, d’une taille ou d’une orientation spécifique. Vous pouvez y parvenir en utilisant les animations CSS keyframe en déclarant plusieurs keyframes avec une seule déclaration.
Prenons l’exemple du bouton que vous avez créé dans la section précédente. Vous souhaitez peut-être itérer sur plusieurs couleurs d’arrière-plan lorsque vous cliquez sur le bouton. Mais vous souhaitez également passer par la même couleur à différents stades de l’animation. Voyons comment réaliser cela dans le code.
Tout d’abord, vous souhaitez animer le bouton uniquement lorsqu’il est cliqué. Vous devez donc créer une classe script.js à l’intérieur duquel vous accédez au bouton et faites basculer une classe sur le bouton lorsqu’il est cliqué :
const button = document.querySelector("button")
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
})
Nous avons utilisé querySelector pour accéder au bouton depuis la page web. Pour en savoir plus sur la traversée du DOM, lisez notre article sur la traversée du DOM à l’aide de JavaScript.
Le temps de fête La classe active une animation intitulée fête:
.party-time {
animation: party 2000ms infinite;
}
Pour l’animation, vous voulez commencer par le rouge et passer au jaune à 25 %. Vous reviendrez ensuite au rouge à 50 % avant de revenir au jaune à 75 %. Enfin, à 100 %, vous opterez pour une couleur bleu foncé :
@keyframes party {
0%, 50% {
background-color: red;
}
25%, 75% {
background-color: yellow;
}
100% {
background-color: hsl(200, 72%, 35%);
}
}
Cette approche est très utile pour alterner les couleurs sur un fond coloré. Comme vous pouvez répéter plusieurs images clés dans une variable, il devient très facile d’utiliser la même propriété à différents stades de votre animation.
3. Utiliser @property pour animer des propriétés personnalisées
Comme vous le savez peut-être déjà, toutes les propriétés CSS ne sont pas animables. La documentation officielle de Mozilla tient à jour un registre de toutes les propriétés CSS animables. Si vous souhaitez animer une propriété non animable, la meilleure solution consiste à utiliser la fonction @propriété directive.
Commencez par changer la couleur d’arrière-plan de votre bouton en un dégradé linéaire :
button {
// other CSS
background: linear-gradient(90deg, blue, green);
// other CSS
}
Voici le résultat :
Il arrive souvent que vous souhaitiez animer le dégradé de couleurs sur le bouton. Bien qu’il existe des astuces pour déplacer votre dégradé, vous ne pouvez pas réellement l’animer. Cela s’explique par le fait que arrière-plan (ainsi que image de fond) n’est pas une propriété animable. C’est dans ce cas que le @property vient en.
Le @propriété vous permet d’enregistrer des propriétés personnalisées. Lorsque vous utilisez la directive @propertyvous devez lui fournir trois valeurs, à savoir la syntaxe, hériteet valeur initiale:
@property --color-1 {
syntax: "<color>";
inherits: true;
initial-value: red;
}
@property --color-2 {
syntax: "<color>";
inherits: true;
initial-value: blue;
}
La première est la propriété de départ, tandis que la seconde est la propriété d’arrivée. Maintenant, au lieu d’effectuer une transition vers une image d’arrière-plan (que vous ne pouvez pas transposer), vous effectuerez une transition de -color-1 à -color-2 (vos propriétés personnalisées) en une seconde :
button {
transition: --color-1 1000ms, --color-2 1000ms;
}
Cette technique est utile car elle permet d’ajouter d’autres personnalisations. Par exemple, vous pouvez ajouter un délai pour rendre l’expérience plus fluide. Les possibilités sont infinies.
4. Utiliser des délais d’animation négatifs
Les délais d’animation sont essentiels pour créer des animations fluides. Voyons un exemple en action. Dans cette partie, ajoutez un div avec 15 points au dessus du bouton :
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
Voici un style de base pour transformer chaque enfant div en un point :
.dots {
display: flex;
gap: .5rem;
margin-bottom: 20px;
}
.dot {
width: 10px;
aspect-ratio: 1;
background-color: red;
border-radius: 50%;
}
Ici, nous utilisons Flexbox pour placer les points sur une ligne horizontale. Pour en savoir plus sur Flexbox, vous pouvez consulter notre tutoriel CSS Flexbox.
A l’intérieur script.jsajoutez le code qui déclenche l’animation des points. Vous faites basculer le code danse classe sur les points :
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
// New code
dots.forEach((dot) => {
dot.classList.toggle('dance')
})
})
La classe de danse active une animation intitulée montée:
.dot.dance {
animation: rise 2000ms infinite alternate;
}
Pour ce qui est de l’animation, il suffit de translater les points de -100px sur l’axe Y :
@keyframes rise {
100% {
transform: translateY(-100px)
}
}
Il est maintenant temps de faire quelque chose d’intéressant. Au lieu que les points se lèvent en même temps, vous voulez animer les points pour qu’ils coulent comme une vague. Pour ce faire, vous devez ajouter animation-delay aux points, et incrémenter chaque point de 100ms :
.dot:nth-child(1) {
animation-delay: 100ms;
}
.dot:nth-child(2) {
animation-delay: 200ms;
}
.dot:nth-child(3) {
animation-delay: 300ms;
}
.dot:nth-child(4) {
animation-delay: 400ms;
}
/* Keep doing till you reach the 15th dot */
Cela crée une animation élégante où les points se déplacent de haut en bas dans une forme ondulée. L’image suivante montre les points au milieu de l’animation :
Gardez à l’esprit que cela peut être problématique, ce qui nous amène au cinquième conseil.
5. Utiliser prefers-reduced-motion pour activer les préférences
Gardez toujours à l’esprit que de nombreuses personnes n’aiment pas les animations basées sur le mouvement. En fait, la plupart des utilisateurs ont des préférences dans le navigateur qui permettent de désactiver le mouvement. Le mouvement peut distraire les sens et, dans les cas les plus graves, provoquer des nausées.
Heureusement, vous pouvez facilement remédier à ce problème en enveloppant votre animation à l’intérieur d’une balise sans préférence media query comme suit :
@media(prefers-reduced-motion: no-preference) {
.dot.dance {
animation: rise 2000ms infinite alternate;
}
}
Maintenant, si vous deviez activer prefers-reduced-motion dans votre navigateur, l’animation ne s’exécutera pas.
En savoir plus sur les conseils et astuces CSS
CSS regorge d’astuces géniales qui vont au-delà des animations et des transitions. Par exemple, il existe des trucs et astuces pour rendre toute votre mise en page élégante et réactive. Ces pratiques peuvent vous aider à rendre votre site web plus attrayant, plus accessible et plus agréable à parcourir. Si vous souhaitez devenir un développeur CSS de premier plan, il vous sera très utile d’avoir quelques astuces dans votre manche.