Explication détaillée de la liaison du sélecteur de l'animation d'images clés @keyframes en CSS3

En CSS3, nous pouvons créer des effets d'animation d'images clés via @keyframes. Nous devons lier @keyframes au sélecteur, sinon aucun effet n'apparaîtra. En parallèle, nous devons également définir la durée et le nom de l'animation

Grammaire

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。

En CSS3, on précise l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "from" et "to", qui sont équivalents à 0% et 100% . Parmi eux, 0 % est l'heure de début de l'animation et 100 % est l'heure de fin de l'animation.

Sélecteur d'images clés
Ajoutons quelques règles d'animation dans @keyframes :

@keyframes sunrise {   
   0% {   
      bottombottom: 0;   
      left: 340px;   
      background: #f00;   
   }   
  
   33% {   
      bottombottom: 340px;   
      left: 340px;   
      background: #ffd630;   
   }   
  
   66% {   
      bottombottom: 340px;   
      left: 40px;   
      background: #ffd630;   
   }   
  
   100% {   
      bottombottom: 0;   
      left: 40px;   
      background: #f00;   
   }   
}

en ajoutant ces nouvelles règles d'animation , nous avons introduit le sélecteur d'images clés. Dans l'exemple de code ci-dessus, 0 %, 33 %, 66 % et 100 % sont des sélecteurs d'images clés. Parmi eux, 0 % et 100 % peuvent être remplacés par « de » et « à ».
Les quatre ensembles de règles d'animation dans l'exemple expriment les quatre états (quatre images clés) de cet élément animé, et les styles lorsqu'il se trouve dans ces quatre états. Ces états non définis (par exemple de 34% à 65%) constituent les états de transition entre ces états définis.
Bien que la spécification soit toujours en cours de révision, il existe certaines règles que les utilisateurs doivent toujours respecter. Par exemple, l'ordre dans lequel les images clés sont écrites n'a pas d'importance, elles seront lues par ordre croissant de pourcentage. Par conséquent, si vous placez l’image clé « vers » avant l’image clé « de », la lecture de l’animation ne changera pas. De plus, si vous ne précisez pas vers ou depuis ou le pourcentage correspondant, le navigateur l'ajoutera automatiquement. Par conséquent, la syntaxe de @keyframes n'est pas conforme aux règles de couverture en cascade de la syntaxe CSS générale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!