web-dev-qa-db-fra.com

CSS transforme les transitions VS

Quelles sont les principales différences entre les transformations CSS et les transitions?

Ces deux éléments sont utilisés pour modifier la forme/l'état actuel d'un objet. (vous pouvez faire de jolies animations avec JS etc.)

Mais je ne sais toujours pas lequel utiliser où et pour quoi.

csscss-transitionscss-transforms
33
rinchik

Ce sont des choses complètement différentes.

Transitions :

Les transitions CSS permettent aux changements de propriétés dans les valeurs CSS de se produire en douceur sur une durée spécifiée.

Transforme :

Les transformations CSS permettent aux éléments de style CSS d'être transformés dans un espace à deux ou trois dimensions.

27
Explosion Pills

transition et transform sont des propriétés CSS distinctes, mais vous pouvez fournir transform à transition pour "animer" une transformation.

transition

La propriété CSS transition écoute les modifications des propriétés spécifiées (couleur d'arrière-plan, largeur, hauteur, etc.) au fil du temps.

transition Syntaxe de la propriété:

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

Par exemple, les styles ci-dessous changeront la couleur de l'arrière-plan d'une div en orange sur une période de 1 seconde au survol.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}
<div></div>

transform

La propriété CSS transform fait pivoter/met à l'échelle/incline un élément sur les axes X, Y ou Z. Son comportement n'est pas lié à transition. Autrement dit, au chargement de la page, l'élément apparaîtra simplement tourné/de travers/mis à l'échelle.

Maintenant, si vous vouliez que la rotation/l'inclinaison/la mise à l'échelle se produise, par exemple lorsqu'un utilisateur survolait l'élément, vous auriez besoin de "transition" la "transformation".

Voici comment: puisque la fonctionnalité de la propriété transition est d'écouter les changements dans d'autres propriétés css, vous pouvez réellement fournir transform comme argument à transition et "animer" la transformation en fonction sur le déclencheur souhaité (par exemple, une action de survol).

transform Syntaxe de la propriété

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

Par exemple, les styles ci-dessous feront pivoter une div sur une période de 1 seconde en survol.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}
<div></div>
52
Conqueror