D'après des études précédentes, nous savons qu'une animation de transition simple peut être réalisée à l'aide de l'attribut transition, mais l'animation de transition ne peut spécifier que les états de début et de fin. L'ensemble du processus est contrôlé par une fonction spécifique, qui n'est pas très flexible. Dans cette section, nous présenterons une animation plus complexe : l'animation.
Animation : Semblable à la transition, certains effets dynamiques peuvent être obtenus. La différence est que la transition doit être déclenchée lorsqu'un certain attribut change, tandis que les effets d'animation peuvent déclencher automatiquement des effets dynamiques. Pour définir des effets d'animation, vous devez d'abord définir une image clé pour définir chaque étape de l'exécution de l'animation. Le format des paramètres d'images clés est le suivant :
<style>/*Définir les images clés de l'animation Le nom de l'image clé est test*/@keyframestest{/*from indique la position de départ de l'animation, qui peut également être exprimée par 0 %. */from{margin-left:0;}/*to indique la position finale de l'animation, qui peut également être exprimée à 100 %. */to{margin-left:100%;}}</style>L'animation en CSS est similaire à l'animation image par image en Flash. Elle est délicate et très flexible. L'utilisation de l'animation en CSS peut remplacer les images dynamiques, les animations Flash ou les effets spéciaux implémentés en JavaScript dans de nombreuses pages Web.
L'animation est l'effet de changer progressivement un élément d'un style à un autre. On peut changer autant de styles qu'on veut, autant de fois qu'on veut (réponse très officielle).
Propriété CSS3animation (animation).
@keyframes
Avec la règle @keyframes nous pouvons créer des animations.
Les animations sont créées en changeant progressivement un ensemble de styles CSS en un autre. Nous pouvons modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation. Précisez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés « de » et « à », qui sont équivalents à 0 % et 100 %.
0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, nous devons toujours définir des sélecteurs 0 % et 100 %. Ici, 0 % correspond à une image, 50 % correspond à une image et 100 % correspond également à une image.
Enfin, utilisez les propriétés de l'animation pour contrôler l'apparence de l'animation et lier l'animation au sélecteur.
nom d'animation requis. Définit le nom de l'animation.
sélecteur d'images clés requis. Valeurs légales pour le pourcentage de durée de l'animation : 0-100 % de (identique à 0 %) à (identique à 100 %)
styles CSS requis. Une ou plusieurs propriétés de style CSS légales
Par exemple:
@keyframesname{0%{top:0px;left:0px;background:red;}25 %{top:0px;left:100px;background:blue;}50 %{top:100px;le ft:100px;background:jaune;}75 %{top:100px;left:0px;background:green;}100 %{top:0px;left:0px;background:red;}}1. attribut animation-name : définissez le nom de l'animation qui doit être lié à l'élément.
L'attribut animation-name est utilisé pour lier l'animation à l'élément HTML spécifié. Les valeurs facultatives de l'attribut sont les suivantes :
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25 %{top:0px;left:350px;}50 %{top:200px;left:350px ;}75 %{haut :200px;gauche:0px;}100 %{haut:0px;gauche :0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;}</style></head><body><div ></div></body></html>Résultats en cours d'exécution :
Remarque : Pour que l'animation soit lue avec succès, vous devez également définir l'attribut animation-duration. Sinon, l'animation ne sera pas lue car la valeur par défaut de l'attribut animation-duration est 0.
2. attribut animation-duration : définit le nombre de secondes ou de millisecondes nécessaires à l'animation pour terminer un cycle.
● temps : spécifiez le temps nécessaire à l'animation pour se terminer. La valeur par défaut est 0, ce qui signifie aucun effet d'animation.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25 %{top:0px;left :350px;}50 %{haut :200px;gauche:350px;}75 %{haut:200px;gauche:0px;}100 %{haut:0px;gauche:0px;}}div{ largeur: 100px; hauteur: 100px; border-radius: 50%; border: 3pxsolidblack; position: relative; animation-name: ball; animation-duration: 2s;</style></head><body><div> </div></body></html>3. fonction d'animation-synchronisation : La fonction mathématique utilisée est appelée courbe de Bézier cubique et courbe de vitesse. Grâce à cette fonction, vous pouvez utiliser votre propre valeur ou utiliser l'une des valeurs prédéfinies.
●linéaire : la vitesse de l'animation est la même du début à la fin ;
●facilité : par défaut. L'animation commence doucement, puis accélère et ralentit avant de se terminer ;
●ease-in : L'animation démarre à faible vitesse ;
●ease-out : L'animation se termine à faible vitesse ;
●ease-in-out : L'animation démarre et se termine à faible vitesse ;
●cubic-bezier (n,n,n,n) : utilisez la fonction cubique-bezier() pour définir la vitesse de lecture de l'animation. La plage de valeurs du paramètre est une valeur comprise entre 0 et 1.
4. attribut animation-delay : définit le moment où l'animation démarre.
●heure : facultatif. Définit le temps, en secondes ou millisecondes, à attendre avant le démarrage de l'animation. La valeur par défaut est 0.
Remarque : L'unité peut être la seconde (s) ou la milliseconde (ms).
5. attribut animation-iteration-count : définit combien de fois l'animation doit être jouée.
Les valeurs facultatives pour l'attribut sont les suivantes :
6. attribut animation-direction : définit s'il faut lire l'animation à l'envers en boucle.
●normal : valeur par défaut. L'animation est jouée normalement ;
●reverse : l'animation est jouée à l'envers ;
●Alternatif : L'animation est jouée en avant en nombres impairs (1, 2, 5...) et en sens inverse en nombres pairs (2, 4, 6...) ;
●alternatif-inverse : l'animation est jouée dans le sens inverse à des moments impairs (1, 3, 5...) et dans le sens avant à des moments pairs (2, 4, 6...).
7. attribut animation-fill-mode : Spécifie le style à appliquer à l'élément lorsque l'animation n'est pas jouée (lorsque l'animation est terminée ou lorsque l'animation a un délai avant de commencer à jouer).
Remarque : Par défaut, les animations CSS n'affectent pas un élément avant la lecture de la première image clé et cessent d'affecter l'élément une fois la dernière image clé terminée. La propriété animation-fill-mode remplace ce comportement.
●aucune valeur par défaut. : L'animation n'appliquera aucun style à l'élément cible avant et après l'exécution de l'animation ;
●forwards : une fois l'animation terminée (déterminée par le nombre d'itérations d'animation), l'animation appliquera cette valeur d'attribut ;
●en arrière : l'animation appliquera les valeurs de propriété définies dans l'image clé qui a démarré la première itération de l'animation lors de la définition du délai d'animation. Il s'agit de valeurs dans l'image clé de départ (lorsque la direction de l'animation est "normale" ou "alternative") ou dans l'image clé de destination (lorsque la direction de l'animation est "inverse" ou "inverse alternative");
●Les deux animations suivent les règles de l'avant et de l'arrière. Autrement dit, l'animation étend la propriété d'animation dans les deux sens.
8.animation-play-state : Spécifie si l'animation est en cours d'exécution ou en pause.
●paused : Spécifie de mettre l'animation en pause ;
●running : Spécifiez l'animation en cours d'exécution.
9. initial : définissez la propriété sur sa valeur par défaut.
●initial : le mot-clé est utilisé pour définir les propriétés CSS à leurs valeurs par défaut ;
●initial : le mot-clé peut être utilisé pour n'importe quel attribut CSS sur n'importe quel élément HTML.
10. hériter : hériter des attributs des éléments parents.
●inherit : mot-clé spécifie qu'un attribut doit hériter de sa valeur de l'élément parent ;
●inherit : le mot-clé peut être utilisé pour n'importe quel attribut CSS sur n'importe quel élément HTML.
animation
L'attribut d'animation est l'abréviation de nom d'animation, durée d'animation, fonction de synchronisation d'animation, délai d'animation, nombre d'itérations d'animation, direction d'animation, mode de remplissage d'animation, état de lecture d'animation, via L'animation L'attribut peut définir plusieurs des attributs ci-dessus en même temps. Le format de syntaxe est le suivant :
animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state ;
Chaque paramètre correspond à chaque attribut introduit ci-dessus. Si une ou plusieurs des valeurs sont omises, la valeur par défaut correspondant à l'attribut sera utilisée.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>animation</title><style>.box1{width:700px;height:500px;background-color:silver;}. box2{width:100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animat fonction de synchronisation ionique : linéaire ;*//*nombre d'itérations d'animation : 4 ;*//*direction d'animation:alternative;*//*mode de remplissage d'animation :en arrière ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*Définir les images clés de l'animation, le nom de l'image clé est test*/@keyframestest{/*from indique la position de départ de l'animation, vous peut également utiliser 0% pour exprimer. */from{margin-left:50px;background-color:orange;}/*to indique la position finale de l'animation, qui peut également être exprimée à 100 %. */to{margin-left:600px;background-color:jaune;}}/*Contrôler le déroulement de l'animation*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>