Améliorez votre site Web à l'aide de ces conseils et astuces d'animation.
Les animations et les transitions sont une partie importante de la conception 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 aider à améliorer l'expérience utilisateur. Apprenez cinq astuces d'animation géniales qui peuvent vous aider à animer votre site Web.
1. Transformer un élément au survol
Une pratique de conception courante consiste à avoir un élément qui évolue lorsqu'il interagit. Par exemple, vous voudrez peut-être traduire les boutons un peu vers le haut lorsque quelqu'un passe la souris dessus. Vous pouvez y parvenir en utilisant le CSS transformer propriété.
Supposons que vous ayez un bouton :
<bouton>
Cliquez sur moi
bouton>
Vous avez stylisé le corps du document ainsi que le bouton :
/* Aligne le bouton au centre de la page */
corps {
afficher: fléchir;
hauteur: 100vh;
aligner les éléments: centre;
justifier-contenu: centre;
Couleur de l'arrière plan: noir;
}/* Stylise le bouton */
bouton {
rembourrage: 1em 2em;
arrière-plan: bleu;
frontière: 0;
couleur: blanc;
rayon de bordure: 0.25rem;
le curseur: aiguille;
taille de police: 2rem;
transition: transformer 500SP;
}
/* États de survol */
bouton:flotter,
bouton:se concentrer {
transformer: traduireY(0.75rem) 500SP;
}
Avec le dernier bloc, vous définissez les états de survol et de focus sur le bouton. Dans les deux états, vous translatez le bouton le long de l'axe Y de 0,75 rem. Le bouton ressemblerait à ceci :
Lorsque vous passez votre souris sur le bouton, il feuillette vers le haut. La transition prend une demi-seconde (500 ms) pour se terminer. Il s'agit d'un modèle que vous pouvez implémenter non seulement sur vos boutons, mais également sur 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 Animations d'images clés CSS en déclarant plusieurs images clés avec une seule déclaration.
Considérez le bouton que vous avez créé dans la section précédente. Peut-être souhaitez-vous itérer sur plusieurs couleurs d'arrière-plan lorsque vous cliquez sur le bouton. Mais vous souhaitez également repasser sur la même couleur à différentes étapes de l'animation. Voyons comment y parvenir dans le code.
Tout d'abord, vous souhaitez animer le bouton uniquement lorsqu'il est cliqué. Donc, vous créeriez un script.js fichier, à l'intérieur duquel vous accédez au bouton et basculez une classe sur le bouton lorsqu'il est cliqué :
constante bouton = document.querySelector("bouton")
bouton.addEventListener("Cliquez sur", (e) => {
bouton.classList.toggle('l'heure de la fête')
})
Nous avons utilisé querySelector pour accéder au bouton depuis la page Web. Pour en savoir plus sur la traversée DOM, lisez notre article sur comment parcourir le DOM en utilisant JavaScript.
Le l'heure de la fête la classe active une animation intitulée faire la fête:
.l'heure de la fête {
animation: faire la fête 2000SPinfini;
}
Pour l'animation, vous souhaitez commencer par le rouge et passer au jaune à 25 %. Ensuite, vous reviendrez au rouge à 50 % avant de revenir au jaune à 75 %. Enfin, à 100%, vous vous contenterez d'une couleur bleu foncé :
@images clés faire la fête {
0%, 50% {
Couleur de l'arrière plan: rouge;
}
25%, 75% {
Couleur de l'arrière plan: jaune;
}
100% {
Couleur de l'arrière plan: HSL(200, 72%, 35%);
}
}
Cette approche est très utile pour alterner les couleurs sur un arrière-plan basé sur la couleur. Parce que 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érentes étapes de votre animation.
3. Utilisation de @property pour animer des propriétés personnalisées
Comme vous le savez peut-être déjà, toutes les propriétés en CSS ne sont pas animables. L'officiel Documentation Mozilla conserve un enregistrement à jour de toutes les propriétés CSS animables. Si vous cherchez à animer une propriété non animable, alors votre meilleure solution serait d'utiliser le @propriété directif.
Commencez par changer la couleur de fond de votre bouton en dégradé linéaire :
bouton {
// autreCSS
arrière-plan: gradient linéaire(90degré, bleu, vert);
// autreCSS
}
Voici la sortie :
Souvent, vous souhaitez animer le dégradé de couleurs sur le bouton. Bien qu'il existe des astuces que vous pouvez utiliser pour déplacer votre dégradé, vous ne pouvez pas réellement l'animer. Ceci est dû au fait arrière-plan (ainsi que image de fond) n'est pas une propriété animable. C'est ici que @propriété entre.
Le @propriété La directive vous permet d'enregistrer des propriétés personnalisées. Lorsque vous utilisez @propriété, vous devez lui fournir trois valeurs, à savoir syntaxe, hérite, et valeur initiale:
@propriété --couleur-1 {
syntaxe: "<couleur>";
hérite: vrai;
valeur initiale: rouge;
}
@propriété --couleur-2 {
syntaxe: "<couleur>";
hérite: vrai;
valeur initiale: bleu;
}
La première est la propriété de départ tandis que la seconde est la propriété de destination. Maintenant, au lieu de faire la transition d'une image d'arrière-plan (que vous ne pouvez pas faire la transition), vous passeriez de --couleur-1 pour --couleur-2 (vos propriétés personnalisées) en une seconde :
bouton {
transition: --couleur-1 1000SP, --couleur-2 1000SP;
}
Cette technique est utile car vous pouvez également ajouter d'autres personnalisations. Par exemple, vous ajoutez un délai pour lui donner une expérience plus fluide. Les possibilités sont infinies.
4. Utilisation de retards d'animation négatifs
Les retards d'animation sont cruciaux pour créer des animations fluides. Voyons un exemple de cela en action. Dans cette partie, ajoutez un div élément avec 15 points au-dessus du bouton :
<divclasse="points">
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
<divclasse="point">div>
div>
Voici quelques styles de base pour transformer chaque enfant div en un point :
.dots {
afficher: fléchir;
écart: .5rem;
marge inférieure: 20pixels;
}
.point {
largeur: 10pixels;
ratio d'aspect: 1;
Couleur de l'arrière plan: rouge;
rayon de bordure: 50%;
}
Ici, nous utilisons Flexbox pour placer les points sur une ligne horizontale. Pour plonger profondément dans Flexbox, vous pouvez consulter notre Tutoriel CSS Flexbox.
À l'intérieur script.js, ajoutez le code qui déclenche l'animation des points. Vous basculez le danse classe sur les points:
bouton.addEventListener("Cliquez sur", (e) => {
bouton.classList.toggle('l'heure de la fête')
// Nouveau code
points.forEach((point) => {
point.classList.toggle('danse')
})
})
Le cours de danse active une animation intitulée augmenter:
.point.danse {
animation: augmenter 2000SPinfinialterner;
}Quant à l'animation, il suffit de translater les points -100px le long de l'axe Y :
@images clés augmenter {
100% {
transformer: traduireY(-100px)
}
}Il est maintenant temps de faire quelque chose d'intéressant. Au lieu que les points montent en même temps, vous voulez animer les points pour qu'ils coulent comme une vague. Pour y parvenir, vous devez ajouter délai d'animation aux points, et incrémentez chaque point de 100 ms :
.point:nième-enfant (1) {
délai d'animation: 100SP;
}
.point:nième-enfant (2) {
délai d'animation: 200SP;
}
.point:nième-enfant (3) {
délai d'animation: 300SP;
}
.point:nième-enfant (4) {
délai d'animation: 400SP;
}
/* Continuez jusqu'à ce que vous atteigniez le 15ème point */
Cela crée une animation élégante où les points se déplacent de haut en bas sous une forme ondulée. L'image suivante capture 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. Utilisez prefers-reduced-motion pour activer les préférences
Gardez toujours à l'esprit que beaucoup de gens 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 peuvent désactiver le mouvement. Le mouvement peut distraire les sens et, dans les cas graves, entraîner des nausées.
Heureusement, vous pouvez facilement vous en occuper en enveloppant votre animation dans un pas de préférence requête multimédia comme ceci :
@médias(préfère-mouvement-réduit: pas de préférence) {
.point.danse {
animation: augmenter 2000SPinfinialterner;
}
}Maintenant, si vous deviez activer préfère-le-mouvement-réduit dans votre navigateur, l'animation ne fonctionnerait pas.
En savoir plus Trucs et astuces CSS
CSS regorge de hacks impressionnants 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. Les pratiques peuvent vous aider à rendre votre site Web plus attrayant, accessible et agréable à parcourir. Si vous voulez être l'un des meilleurs développeurs CSS à 1%, avoir quelques astuces dans votre manche aide beaucoup.
