Que sont la transition, la transformation et l'animation en CSS3 ? La différence entre les trois

Ce chapitre vous présentera ce que sont la transition, la transformation et l'animation en CSS3 ? La différence entre les trois. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

transition

la transition permet aux valeurs d'attribut CSS de passer en douceur dans un certain intervalle de temps. comme suit :

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

Propriétés liées à la transition :

1. transition-property : utilisée pour spécifier les propriétés d'exécution de l'effet de transition, qui peuvent être aucune, toutes ou des propriétés spécifiques.

2. transition-duration : la durée d'exécution de l'animation, en s (secondes) ou ms (millisecondes).

3. fonction de synchronisation de transition : effet de taux de transformation, les valeurs facultatives sont facilite|linéaire|facilité-in|facilité-out|facilité-in-out|cubic-bezier (personnalisé courbe temporelle).

4. transition-delay : utilisé pour spécifier l'heure à laquelle l'animation commence à s'exécuter. La valeur est la même que la durée de transition, mais peut être un nombre négatif.

transformation

la transformation est divisée en 2D et 3D. Nous présentons ici uniquement la transformation 2D la plus couramment utilisée. Le principal Il comprend les transformations suivantes : rotation, inclinaison, échelle, translation et transformation matricielle. La syntaxe est la suivante :

transform: rotate | scale | skew | translate |matrix;

Propriétés associées de la transformation :

<🎜. >
1. Rotation en rotation

   L'unité de rotation est le degré, un nombre positif signifie une rotation dans le sens des aiguilles d'une montre, un nombre négatif signifie une rotation dans le sens inverse des aiguilles d'une montre.
   

2. échelle Échelle La plage de valeurs de

   échelle est de 0 à n. Lorsqu'elle est inférieure à 1, cela signifie la réduire, sinon cela signifie l'agrandir. Par exemple, scale(0.5, 2) signifie que la direction horizontale est réduite de 1 fois et la direction verticale est agrandie de 1 fois. De plus, une direction peut également être définie via scaleX ou scaleY.
   

3. Distorsion d'inclinaison

   L'unité d'inclinaison est la même que la rotation, qui est en degrés degrés. Par exemple, skew(30deg, 10deg) signifie que la direction horizontale est inclinée de 30 degrés et la direction verticale est inclinée de 10 degrés.
   

4. traduire le décalage

   Le décalage comprend également le décalage horizontal et le décalage vertical. translation(x,y) se déplace horizontalement et verticalement en même temps (c'est-à-dire que les axes X et Y se déplacent simultanément) translateX(x) se déplace uniquement horizontalement (l'axe X se déplace uniquement translationY(Y) ); verticalement (déplacement sur l’axe Y).
   

animation

L'animation en CSS3 est contrôlée par un élément appelé Keyframes. Le nom commence par "@keyframes". , suivi du "nom de l'animation" plus une paire d'accolades "{}". Entre parenthèses se trouvent quelques règles de style pour différentes périodes, un peu comme la façon dont nous écrivons les styles CSS. Pour une règle de style dans "@keyframes" composée de plusieurs pourcentages, par exemple entre "0%" et "100%", la syntaxe est la suivante :

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部写成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

l'animation a sa propre relation avec transition. Attributs correspondants, il y a principalement les suivants dans l'animation : animation-duration ; animation-time-function ; animation-itération-count ; animation-play-state ; Certains des attributs sont expliqués ci-dessous :

1. nom de l'image clé de l'animation :

   est utilisé pour définir le nom d'une animation, qui est le nom de l'animation créée par le précédent images clés, la valeur par défaut est none, lorsque la valeur est none, il n'y aura aucun effet d'animation. Si l'on souhaite attacher plusieurs animations à un élément en même temps, il suffit de les séparer par des virgules.
   

2. animation-iteration-count Nombre de boucles d'animation :

   La valeur par défaut est 1. Si vous souhaitez boucler à l'infini, réglez-le simplement sur infini.
   

3. animation-direction direction de lecture de l'animation :

   Il n'a que deux valeurs, la valeur par défaut est normale, si elle est définie sur normale, chaque boucle de l'animation sera lue vers l'avant ; l'autre La valeur est alternative. Sa fonction est de lire l'animation vers l'avant dans les temps pairs et dans le sens inverse dans les temps impairs.
   

4. animation-play-state play state :

   Il a principalement deux valeurs, en cours d'exécution et en pause, dont running est la valeur par défaut. Vous pouvez arrêter l'animation en cours de lecture en mettant en pause, et vous pouvez également rejouer l'animation en pause en cours d'exécution. Cet attribut n'est pas couramment utilisé.
   

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!