CSS est l'un des moyens les plus puissants de rendre la page Web interactive. Il transforme l'apparence et les sensations de nos basiques page Web. L'une des fonctionnalités importantes et intéressantes offertes par CSS est qu'il nous permet d'effectuer des animations. Cela nous permet de déplacer les éléments dans notre page. Commençons notre voyage des animations en CSS dans l'ordre suivant:
Animations en CSS
L'ajout d'animations à notre site Web est un excellent moyen d'attirer l'attention des utilisateurs. Cela ajoute non seulement de la valeur à notre page, mais enrichit également l'expérience utilisateur. L'animation en CSS est construite sur deux parties. Elles sont
- Images clés
- Animation
Les animations CSS sont prises en charge dans tous les navigateurs. Cependant, certains navigateurs plus anciens tels que Safari (jusqu'à la version 8.0) nécessitent un préfixe (-webkit-) pour interpréter les propriétés de l'animation. Par exemple:
.anim {hauteur: 200px largeur: 200px arrière-plan: bleu clair position: rayon de la bordure relative: 100% -webkit-animation-name: cssanim / * anciens navigateurs * / -webkit-animation-duration: 5s / * anciens navigateurs * / animation -name: cssanim animation-duration: 5s} / * anciens navigateurs * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {gauche: 300px}}Nous pouvons utiliser l'exemple de page html ci-dessus et remplacer le code CSS dans la balise style pour essayer d'autres exemples.
Images clés en CSS
C'est le bloc de construction des animations en CSS. Il définissait des moments et des styles spécifiques de l'animation sur notre page Web. En d'autres termes, lorsque nous spécifions les @keyframes dans notre CSS, il obtient le contrôle pour modifier l'état actuel vers un nouvel état ou animer les objets pendant une certaine durée.
Les @keyframes doivent avoir certaines propriétés pour contrôler l'animation, telles que le nom de l'animation, les étapes et les propriétés.
Nom - Un nom est requis pour chaque animation pour décrire ses comportements.
Étapes - La scène représente l'achèvement d'une animation. Cela peut être fait soit avec les mots-clés «to» et «from» ou sous forme de pourcentage, alors que 0% représente l'état de début et 100% représente l'état final d'une animation. L'avantage d'utiliser la représentation en pourcentage est que nous pouvons définir plusieurs étapes intermédiaires entre les deux, c'est-à-dire quel devrait être le comportement de l'animation à 50% ou 75%, etc.
Propriétés - Ces propriétés nous permettent de contrôler les @keyframes pour les manipuler lors de l'animation.
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Maintenant que nous sommes clairs sur la définition des images clés. Explorons les propriétés de l'animation, pour décrire comment animer nos éléments et objets. Les deux propriétés, à savoir inherit et initial, peuvent être utilisées avec tous les types d'animation. Ces propriétés sont généralement utilisées avec la balise div pour présenter différents comportements.
initiale: Définit cette propriété sur sa valeur par défaut.
hériter: Hérite cette propriété de son élément parent.
Propriétés d'animation
- nom-animation
Il spécifie le nom de l'animation, qui est utilisé dans les @keyframes à manipuler.Les valeurs possibles sont:
- Nom: Cela spécifie le nom à lier à l'image clé pour l'animation.
- aucun: Il s'agit de la valeur par défaut et peut être utilisée pour remplacer les animations héritées ou en cascade.
Syntaxe:
nom-animation: nom | aucun | initiale | hériter
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animation-durée
Il spécifie le temps nécessaire à une animation pour terminer une exécution. Il est défini en secondes ou millisecondes (par exemple, 4 s ou 400 ms). La valeur par défaut de cette propriété est 0s, donc si cette propriété n'est pas spécifiée, l'animation n'aura pas lieu.
Syntaxe:
animation-duration: temps
.anim {hauteur: 200px largeur: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- retard d'animation
La propriété animation-delay nous permet de spécifier le retard dans l'animation. Il définit quand une séquence d'animation commencera l'exécution.
La valeur de cette propriété peut être déclarée en secondes (s) ou en millisecondes (ms). Il peut contenir des valeurs positives et négatives. Une valeur positive indique que l'animation démarrera une fois le temps spécifié écoulé et que jusque-là elle restera unanime. En revanche, une valeur négative démarrera immédiatement l'animation à partir du point comme si elle était déjà en cours d'exécution pendant un laps de temps spécifié.
Syntaxe:
animation-delay: temps
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {gauche: 250px}}- nombre d'itérations d'animation
Cette propriété indique le nombre de fois qu'une séquence d'animation doit être lue. La valeur par défaut de cette propriété est 1.Les valeurs possibles sont:
- nombre - désigne le nombre d'itérations
- infini - indique que l'animation doit se répéter indéfiniment
Syntaxe:
nombre d'itérations d'animation: nombre | infini
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {gauche: 100px}}- animation-direction
Il définit la direction de l'animation. La direction de l'élément peut être réglée pour lire en avant, en arrière ou en cycles alternés.La valeur par défaut de cette propriété est normale et elle est réinitialisée à chaque cycle.Les valeurs possibles sont:
Ordinaire - C'est le comportement par défaut et l'animation est lue en avant. Après chaque cycle, l'animation retrouve son état initial et est rejouée en avant
structure de données de file d'attente en java
sens inverse - L'animation est jouée dans le sens inverse. Après chaque cycle, l'animation atteint son état final et est lue à l'envers
alterner - La direction de l'animation est inversée, c'est-à-dire qu'elle est lue d'abord en avant, puis en arrière à chaque cycle. Chaque cycle impair rend l'animation vers l'avant et chaque cycle pair rend le mouvement vers l'arrière.
alterné-inverse - Le sens de l'animation est inversé en alternance. Ici, l'animation est d'abord lue en arrière, puis en avant à chaque cycle. Chaque cycle impair se déplace vers l'arrière ou vers l'arrière et chaque cycle pair rend l'animation vers l'avant.
Syntaxe:
animation-direction: normal | inverse |alternative | alterné-inverse
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {gauche: 100px}}- fonction de synchronisation d'animation
Cette propriété détermine la courbe de vitesse ou le style de mouvement de l'animation. Il est assigné pour effectuer la modification du style d'animation en douceur d'une forme à une autre. Si aucune valeur n'est attribuée, la valeur par défaut est facilitée.Les valeurs possibles pour animation-timing-function sont:
facilité - Il s'agit de la valeur par défaut de la propriété. Ici, l'animation commence lentement, devient progressivement rapide au milieu, puis se termine lentement.
linéaire - L'animation maintient la même vitesse tout au long du cycle c'est-à-dire du début à la fin.
facilité dans - L'animation démarre lentement.
facilité - L'animation se termine lentement.
facilité d'entrée - L'animation se déplace lentement au début et à la fin.
java casting double en int
cubique-bezier (n, n, n, n) - Cette fonctionnalité avancée nous permet de créer une fonction de chronométrage personnalisée en définissant nos propres valeurs. La valeur possible varie de 0 à 1.
Syntaxe:
fonction de synchronisation d'animation: linéaire | facilité | facilité | facilité d'entrée | facilité d'entrée |cubique-bezier (n, n, n, n)
.anim {hauteur: 200px largeur: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {arrière-plan: jaune à gauche: 200 px haut: 200 px} 100% {arrière-plan: bleu à gauche: 100 px}}- mode de remplissage d'animation
Il s'agit d'une propriété spéciale car elle détermine le style d'animation avant ou après la lecture de l'animation.Par défaut, le style de l'élément n'est pas affecté par l'animation avant le début ou après sa fin. Cette propriété est utile car elle permet de remplacer ce comportement par défaut de l'animation.Les valeurs suivantes sont possibles pour la propriété animation-fill-mode:
aucun - Il s'agit de la valeur par défaut de la propriété, c'est-à-dire que les styles d'animation ne sont pas appliqués à l'élément, avant ou après l'animation.
les attaquants - Les styles sont conservés par l'élément dans la séquence d'animation finale, c'est-à-dire une fois l'animation terminée.
en arrière - Les styles sont conservés par l'élément dans la séquence d'animation initiale, c'est-à-dire avant que l'animation ne soit démarrée, en particulier pendant le délai d'animation.
tous les deux - Cela signifie que l'animation suivra à la fois dans le sens, c'est-à-dire vers l'avant et vers l'arrière
Syntaxe:
mode de remplissage d'animation: aucun | attaquants | en arrière | tous les deux
.anim {largeur: 50px hauteur: 50px arrière-plan: bleu clair couleur: blanc épaisseur de police: gras position: nom-d'animation relative: cssanim durée-animation: 5s nombre d'itérations-d'animation: rayon de bordure infini: 100%} # anim1 { animation-timing-function: easy} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easy-in} # anim4 {animation-timing-function: easy-out} # anim5 {animation- fonction de synchronisation: facilité d'entrée-sortie} @keyframes cssanim {de {left: 0px} à {left: 400px}}- état de lecture de l'animation
Cette propriété spécifie qu'une animation doit être en cours de lecture ou en pause. De plus, lorsqu'une animation reprend à partir d'une pause, elle reprend là où elle s'est arrêtée.Les valeurs possibles sont:
- en jouant - Pour rendre l'animation en cours d'exécution
- mis en pause - Pour rendre l'animation en état de pause.
Syntaxe:
état de lecture de l'animation: mis en pause | en jouant
.anim {largeur: 100px hauteur: 100px arrière-plan: bleu clair position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animation
C'est ce qu'on appelle la propriété abrégée d'animation. Il est utilisé pour un code plus propre. Une fois que nous nous sommes habitués à toutes les propriétés d'animation, il est conseillé d'utiliser le raccourci animation pour coder plus rapidement et définir toutes les propriétés sur une seule ligne.
Syntaxe:
animation: [nom-animation] | [durée-animation] | [fonction de synchronisation d'animation] |[animation-retard] | [nombre d'itérations d'animation] | [direction-animation] |[mode de remplissage d'animation] | [état de lecture de l'animation]
Tous les effets d'animation que nous montrons ci-dessus en utilisant différentes propriétés d'animation peuvent être obtenus en utilisant le raccourcianimation propriété.
.anim {hauteur: 200px largeur: 200px arrière-plan: bleu clair position: rayon de la bordure relative: 100% nom-animation: cssanim durée-animation: 2s direction-animation: état de lecture-animation normal: pause} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Ceci conclut toutes les propriétés d'animation qui peuvent être utilisées dans CSS. Nous devrions essayer différentes variantes de ces propriétés pour obtenir une image plus claire. Lorsque nous nous sentons à l'aise, la propriété abrégée animation peut être d'une grande aide pour écrire un code plus propre et plus rapide. C'est l'une des compétences importantes à apprendre en CSS pour les développeurs Web. Puisque nous avons tendance à nous concentrer davantage sur les objets en mouvement que sur les objets statiques, les animations peuvent nous aider à atteindre cet objectif et également à développer de superbes pages Web remarquables.
Découvrez notre qui s'accompagne d'une formation en direct animée par un instructeur et d'une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Animations en CSS» et nous vous recontacterons.