Synthèse : Transform & Transition

Les transitions CSS vont nous permettre de modifier la valeur d’une propriété CSS de manière fluide et selon une durée que l’on va pouvoir définir. On va donc pouvoir choisir deux valeurs pour une propriété (une première de départ ou valeur par défaut et une seconde d’arrivée) et faire en sorte qu'elle change progressivement, de la valeur de départ à celle d’arrivée.

Mécanisme de la transition

.exemple {
Transition-property : "propriété qui va être affectée" ;
/*Etat initial*/
propriété : valeur1;
}

.exemple:hover {
/*Etat final*/
propriété : valeur2;
}

Transition-property

Designe le nom de la propriété qui va être affecté par la transition (ex : color, width
on peut également mettre "all" , la transition s'applique à toutes les propriétés modifiées )

Exemple

#property {
transition-property: width, color;
/*Etat initial*/
margin: 0 auto;
width: 100px;
padding: 5px;
background-color: #F5840E>
color: black;
}
#property:hover {
/*Etat final*/
width: 200px;
color: white;
}

Transition-duration

Designe le nombre de secondes (ou mili-secondes) que va durer la transition

#duration {
margin: 0 auto;
transition-property: border-radius;
transition-duration: 2s;
width: 100px;
height: 100px;
background-color: #F5840E;
color: white;
/*Etat initial : ici il est implicite, par défaut le border-radius est de 0 */
}
#duration:hover {
/*Etat final*/
border-radius: 50%;
}

Transition-delay

Designe le temps à attendre avant que la transition commence

#delay {
margin: 0 auto;
transition-property: background-color;
transition-duration: 2s;
transition-delay: 1s;
width: 100px;
height: 100px;
/*Etat initial*/
background-color: #F5840E;
color: white;
} #delay:hover {
/*Etat final*/
background-color: #27585d;
}

Transition-timing-function

Permet de choisir la vitesse de la transition au sein de celle ci. Nous allons ainsi pouvoir créer des transitions totalement linéaires ou, au contraire, en créer qui vont s’accélérer ou ralentir au milieu. Nous allons pouvoir passer les valeurs suivantes à cette propriété :

cubic-bezier(x1,y1,x2,y2) : sert à créer une transition à la vitesse totalement personnalisée en renseignant une courbe de Bézier cubique,
sans rentrer dans les détails, les deux premières valeurs correspondent aux coordonnées du premier point de contrôle, les deux autres au deuxième (les valeurs en y peuvent être négatives, voir exemple final
Le site cubic-bezier permet de générer sa propre courbe de Bezier cubique et de la comparer aux valeurs prédéfinies ci-dessous :

ease : valeur par défaut. Permet de créer une transition relativement lente au début puis qui s’accélère au milieu et qui se termine lentement,
correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear : permet de créer une transition totalement linéaire c’est-à-dire qui va aller à la même vitesse du début à la fin ,
correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in : permet de créer une transition avec un départ lent puis qui s’accélère ensuite,
correspond à cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out : permet de créer une transition qui va ralentir à la fin , correspond à cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out : permet de créer une transition lente au début puis qui s’accélère au milieu et qui se termine lentement. Ressemble fortement à transition-timing-function : ease mais démarre plus lentement,
correspond à cubic-bezier(0.42, 0, 0.58, 1.0)

Il est également possible d'avoir une transition saccadée :

steps(n, mot cle) : nombre positif et les mots clés start ou end,
L'animation Css est divisée en n étape(s) et elle est jouée au début de l'étape si start ou en fin si end.

step-start : L'animation Css comporte une seule étape et elle est jouée au début de l'étape,
équivalent à steps(1, start)

step-end : L'animation Css comporte une seule étape et elle est jouée à la fin de l'étape,
équivalent à steps(1, end)

#timeFunc {
margin: 0 auto;
transition-property: width;
transition-duration: 3s;
transition-timing-function: ease-in;
/* pour une transition saccadée */
/* transition-timing-function: steps(6,end);*/
/*Etat initial*/
width: 100px;
height: 100px;
background-color: #e1cf7e;
}
#timeFunc:hover {
/*Etat final*/
width: 500px;
}

Il est bien sur possible de grouper le tout avec une propriété "transition", de cette manière :

.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Il n'est pas obligatoire d'indiquer les 4 valeurs ( si l'on ne souhaite pas avoir un "delay" par exemple, ou si l'on veut garder la valeur par défaut pour "transition-timing-function").
Pour appliquer des transitions sur plusieurs éléments, on les sépare par une virgule :

.exemple {
transition : width 2s 0.5s , background-color 1s;
}

#final {
margin: 0 auto;
transition: width 2s cubic-bezier(0.5, -0.5, 0.5, 1.5) 200ms, background-color 1s;
/*Etat initial*/
width: 100px;
height: 100px;
background-color : #f5840e;
}
#final:hover {
/*Etat final*/
width : 500px;
background-color: #e1cf7e;
}

Transition & Transform | Exercices

Transition

Mécanisme de la transition

Transition-property

Transition-duration

Transition-delay

Transition-timing-function

Transform : quelques propriétés

Scale(x , y)

Skew(x degré)

Rotate(x degré)

Translate(x, y)

Transform : exemple combiné

scale + skew + rotate + translate