Transitions CSS

Transitions CSS

Les transitions CSS vous permettent de changer progressivement la valeur de l'attribut au fil du temps.

Déplacez le curseur sur cet élément pour voir l'effet de transition CSS :

CSS

Dans ce chapitre, vous apprendrez les propriétés suivantes :

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Prise en charge du navigateur pour la transition

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

property Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Comment utiliser les transitions CSS ?

Pour créer un effet de transition, il faut clairement définir deux choses :

  • L'attribut CSS de l'effet que vous souhaitez ajouter
  • Durée de l'effet

Attention :Si la partie de la durée n'est pas définie, la transition n'aura pas d'effet, car la valeur par défaut est 0.

L'exemple suivant montre un élément <div> rouge de 100px * 100px. L'élément <div> a également spécifié un effet de transition pour la propriété width, avec une durée de 2 secondes :

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Lorsque la valeur de l'attribut CSS spécifié (width) change, le effet de transition commence.

Maintenant, nous allons attribuer une nouvelle valeur à la propriété width lorsque le curseur est sur l'élément <div> :

Example

div:hover {
  width: 300px;
}

Try it yourself

Veuillez noter que lorsque le curseur quitte l'élément, il revient progressivement à son style d'origine.

Change the values of several properties

The following example adds transition effects to both the width and height properties, width is 2 seconds, and height is 4 seconds:

Example

div {
  transition: width 2s, height 4s;
}

Try it yourself

Specify the speed curve of the transition

transition-timing-function The property specifies the speed curve of the transition effect.

The transition-timing-function property accepts the following values:

  • ease - Specifies a transition effect that starts slowly, then accelerates, and then ends slowly (default)
  • linear - Specifies a transition effect that has the same speed from start to end
  • ease-in - Specifies a transition effect that starts slowly
  • ease-out - Specifies a transition effect that ends slowly
  • ease-in-out - Specifies a transition effect that starts and ends slower
  • cubic-bezier(n,n,n,n) - Allows you to define your own values in the cubic Bezier function

The following examples show some different speed curves that can be used:

Example

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Try it yourself

Delay the transition effect

transition-delay The property specifies the delay of the transition effect (in seconds).

The following example has a 1-second delay before starting:

Example

div {
  transition-delay: 1s;
}

Try it yourself

Transition + Transform

The following example adds a transition effect to the transform:

Example

div {
  transition: width 2s, height 2s, transform 2s;
}

Try it yourself

More transition examples

You can specify each CSS transition property individually, as shown below:

Example

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Try it yourself

Or use the shorthand transition Property:

Example

div {
  transition: width 2s linear 1s;
}

Try it yourself

CSS transition properties

The following table lists all CSS transition properties:

property description
transition Propriété abrégée, utilisée pour définir quatre propriétés de transition sur une seule propriété.
transition-delay Définir le délai d'effet de transition (en secondes).
transition-duration Définir pendant combien de secondes ou de millisecondes l'effet de transition doit durer.
transition-property Définir le nom de la propriété CSS cible de l'effet de transition.
transition-timing-function Définir la courbe de vitesse de l'effet de transition.