Comment utiliser la propriété Transition CSS

Avec l’arrivée du CSS3 vient de nombreuses nouvelles fonctionnalités qui sont disponibles pour créer de superbes effets, l’une des plus utiles est la propriété de transition.

La propriété de transition est un nouveau module CSS3. Il peut être utilisé pour créer un effet de changement dynamique sur une balise html ou une classe en utilisant une structure simple:

transition: property duration timing-function delay;

La transition de CSS3 est un excellent moyen d’ajouter une petite animation aux sites sans utiliser le moindre javascript. Avant de commencer, vous pouvez voir un tutoriel css que j’ai fais et qui exploite cette propriété :
Tutoriel – Réaliser une carte en CSS

Propriété

Premièrement, pour que la propriété de transition fonctionne, la propriété standard à laquelle elle s’appliquera doit être définie. Nous allons dans notre exemple ajouter une transition sur un background-color. Pour écrire la propriété autonome, utilisez simplement:

transition-property: background-color;

Transition

Ensuite, une fois la propriété définie, les valeurs de début et de fin doivent être affectées. Dans le cas de notre exemple, il doit avoir une couleur de départ, puis une valeur de fin avec une autre condition.
Par exemple, nous définissons ici la propriété de transition sur background-color, puis la valeur de début de background-color sur la valise #element, puis définissons la valeur de fin lorsque l’utilisateur survole notre élément avec #element:hover:

#element {
    transition-property:background-color;
    background-color:red; 
}
#element:hover {
    background-color:blue;
}

Durée d’animation

Maintenant que nous avons défini la propriété à transformer avec les valeurs de début et de fin, nous devons définir la durée de la transition. Ceci est réalisé en définissant une durée en secondes ou en millisecondes comme ci-dessous :

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red; 
}
#element:hover {
    background-color:blue;
}

Cela signifie que la div #element va changer de background-color sur une durée de 200 milisecondes ( 0,2 seconde )

La propriété transition-timing-function

Le code est suffisant pour créer une transition, cependant nous pouvons utiliser la propriété transition-timing-function. Cette propriété permet de modifier l’effet de la transition. La propriété de transition est définie par défaut sur une courbe linéaire ease. Cependant, vous pouvez définir d’autres effets proposer nativement ou utiliser une courbe de bészier pour réaliser votre propre effet.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

Voici ce que ça donne dans notre exemple :

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out; 
    background-color:red; 
}
#element:hover {
    background-color:blue;
}

Retarder la transition

De plus, tout comme la durée de transition, l’utilisation de la propriété transition-delay permet de retarder le début de l’effet de transition.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out; 
    transition-delay: 1s;
    background-color:red; 
}
#element:hover {
    background-color:blue;
}

···