Animation css exemple : Un visage rayonnant

Cet article « Animation CSS exemple » vous expliquera brièvement le principe d’une animation en CSS afin que vous compreniez les dessous de celle-ci. Grâce à la vidéo incluse, vous pourrez la reproduire à l’identique.
En fin, vous pourrez visualiser l’animation par vous-même et voir si celle-ci vous inspire.

HTML:

<div class="box"></div>

CSS:

.box {
width: 100px;
height: 100px;
background-color: red;
animation: move-right 1s linear infinite;
}
@keyframes move-right {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}


Dans cet exemple, l’élément avec la class « box » sera animé pour se déplacer horizontalement de 100 pixels à droite en 1 seconde, en boucle infiniment.

• name : Le nom de l’animation, qui doit correspondre à un @keyframes défini auparavant dans le code CSS.
• duration : La durée de l’animation, en secondes (s) ou en millisecondes (ms).
• timing-function : La fonction de temps qui définit la vitesse de l’animation. Les options courantes sont ease, linear, ease-in, ease-out, et ease-in-out.
• iteration-count : Le nombre de fois que l’animation sera jouée. La valeur par défaut est 1, mais vous pouvez spécifier infinite pour jouer l’animation en boucle.
• direction : La direction de l’animation. Les options courantes sont normal, reverse, alternate, et alternate-reverse.
• fill-mode : La façon dont l’élément doit être affiché avant et après l’animation. Les options courantes sont none, forwards, backwards, et both.
• play-state : L’état de lecture de l’animation. Les options courantes sont running et paused.

Voici un exemple de propriété animation utilisant toutes ces valeurs :

animation: move-right 1s ease-in-out infinite alternate;

Dans cet exemple, l’animation s’appelle « move-right », dure 1 seconde, utilise une fonction de temps « ease-in-out », joue en boucle infiniment, et utilise la direction « alternate » (va et vient).

• horizontal offset : L’offset horizontal de l’ombre, en pixels (px) ou en pourcentage (%). Les valeurs positives déplacent l’ombre vers la droite, les valeurs négatives vers la gauche.
• vertical offset : L’offset vertical de l’ombre, en pixels (px) ou en pourcentage (%). Les valeurs positives déplacent l’ombre vers le bas, les valeurs négatives vers le haut.
• blur radius : Le rayon de flou de l’ombre, en pixels (px). Plus la valeur est élevée, plus l’ombre sera floue.
• spread radius : Le rayon de propagation de l’ombre, en pixels (px). Plus la valeur est élevée, plus l’ombre sera étendue.
• color : La couleur de l’ombre, utilisant n’importe quel format de couleur valide CSS (par exemple, rgb, hsl, ou hex).
• inset : ( optionnel ) Spécifie si l’ombre est une ombre interne ( inset) ou externe (par défaut).

Voici un exemple de propriété box-shadow utilisant toutes ces valeurs:

box-shadow: 10px 5px 5px 0px rgba(0,0,0,0.75);

Dans cet exemple, l’ombre est décalée de 10 pixels horizontalement vers la droite et de 5 pixels verticalement vers le bas, avec un rayon de flou de 5 pixels et sans rayon de propagation, la couleur de l’ombre est noir (0,0,0) avec un alpha de 0.75 pour rendre l’ombre semi-transparente.

• translateX(n) : Déplace l’élément horizontalement de n pixels (px) ou pourcentages (%). Les valeurs positives déplacent l’élément vers la droite, les valeurs négatives vers la gauche.
• translateY(n) : Déplace l’élément verticalement de n pixels (px) ou pourcentages (%). Les valeurs positives déplacent l’élément vers le bas, les valeurs négatives vers le haut.
• rotate(n) : Fait tourner l’élément de n degrés (deg) autour de son centre. Les valeurs positives font tourner l’élément dans le sens des aiguilles d’une montre, les valeurs négatives dans le sens inverse.
• scaleX(n) : Change la taille de l’élément horizontalement de n (1 = aucun changement de taille, <1 = réduction, >1 = agrandissement).
• scaleY(n) : Change la taille de l’élément verticalement de n (1 = aucun changement de taille, <1 = réduction, >1 = agrandissement).
• `skewX(n) : Incline l’élément horizontalement de n degrés (deg).
• skewY(n) : Incline l’élément verticalement de n degrés (deg).
• matrix(n,n,n,n,n,n) : Applique une transformation matrix à l’élément.

Voici un exemple de propriété transform utilisant plusieurs valeurs :

transform: rotate(45deg) skewX(10deg) scale(1.2,0.8);

Dans cet exemple, l’élément est tourné de 45 degrés dans le sens des aiguilles d’une montre, incliné horizontalement de 10 degrés, et agrandi de 20% horizontalement et réduit de 20% verticalement.

• Attirer l’attention : Les animations uniques peuvent attirer l’attention des utilisateurs sur des éléments spécifiques du site, tels que les boutons d’appel à l’action ou les images de produits.
• Améliorer l’expérience utilisateur : Les animations peuvent ajouter de la fluidité et du dynamisme à un site, ce qui peut améliorer l’expérience utilisateur globale.
• Donner vie au contenu : Les animations peuvent donner vie à un contenu statique, en le rendant plus intéressant et engageant pour les utilisateurs.
• Renforcer la marque : Les animations uniques peuvent renforcer l’identité visuelle de la marque en lui donnant un style distinctif et en la rendant plus mémorable pour les utilisateurs.
• Aider à la compréhension : les animations peuvent aider les utilisateurs à comprendre les concepts et les idées présentés sur le site en expliquant les processus ou les fonctionnalités de manière interactive.

Il est important de noter que les animations doivent être utilisées avec parcimonie et en adéquation avec le contenu et le design du site, pour ne pas distraire ou rendre le site trop chargé. Il est également important de s’assurer que les animations sont optimisées pour une bonne performance afin de ne pas ralentir le chargement de la page.

Bonjour,
Je m’appelle Sébastien. Ingénieur de formation avec 11 ans d’expérience, je me lance en freelance (= autoentrepreneur) dans la création de sites internet pour mes clients.
N’hésitez pas à me demander un devis (si vous êtes concernés) ou à poster un commentaire, un petit retour sur cet article gratuit.
Je suis convaincu que la meilleure manière d’apprendre est la pratique. Alors, lancez-vous !