I. Introduction▲
Avant de nous plonger tête baissée dans les exemples et le code, il est important de poser les bases.
Qu'est-ce qu'une transition et quand intervient-elle ?
Une transition est l'étape entre deux états. C'est indiquer comment on passe d'un état A à un état B. Par exemple, vous changez la couleur de fond d'un menu quand on le survole ? Et bien la transition intervient au moment du changement, entre le background: red; initial et background: blue; final.
Plus concrètement : si vous disposez d'un bloc avec une couleur de fond rouge et qu'au survol de celui-ci vous voulez qu'il soit bleu, le changement de couleur se fera directement. Avec les transitions, il est possible de changer la couleur progressivement. Voyez plutôt…
Oups ! Avant de continuer… Vous êtes sous Internet Explorer ? Je suis vraiment navré, mais la suite de cet article ne sera qu'une lecture à titre informatif. Ces propriétés ne sont pas encore prises en charge, même dans sa version 9.
II. Fini le blabla, place au code !▲
II-A. Tout part de là▲
Je pense que nous sommes au point sur le principe, voyons maintenant comment on le met en œuvre.
Voici les propriétés que nous allons voir dans la suite de cet article :
| Nom | Description | Syntaxe |
| transition-property | les propriétés CSS à transformer | none | [ all | <IDENT> ] [ ‘,' [ all | <IDENT> ] ]* |
| transition-duration | la durée de la transition | <time> [, <time>]* |
| transition-delay | le délai du départ de la transition | <time> [, <time>]* |
| transition-timing-function | le modèle d'interpolation (accélération, décélération…) | [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] ]* |
Sans oublier la propriété raccourcie : transition qui regroupe celles sus-citées.
Firefox a besoin d'une version préfixée (-moz-transition-*) et ce depuis la version 12. Idem pour Chrome et Safari (WebKit oblige), préfixe (-webkit-transition-*) depuis la version 20 pour Google et 5.1 pour Apple. Enfin, Opera, pour qui il faut le préfixe -o depuis la version 12.
Pour des raisons de clarté et de lecture, les exemples ci-dessous ne seront pas préfixés. À vous de vous assurer de la compatibilité de ces sources avec votre navigateur.
Entrons dans le vif du sujet avec ceci :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!doctype html>
<head>
<title>Les transitions ? C'est trop la classe !</title>
<meta charset="utf-8" />
<style type="text/css">
div {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: silver;
border-radius: 20px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px black;
/* Seuls la couleur de fond et les arrondis seront affectés par la transition */
transition-property: background-color, border-radius;
/* La transition se fera en une seconde */
transition-duration: 1s;
}
div:hover {
background-color: #4282b4;
border-radius: 60px;
color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<header>
</header>
<article>
<div><p>Un beau bloc avec des bords arrondis</p></div>
</article>
<footer>
</footer>
</body>
</html>
Bon, ici, rien d'extraordinaire ; une petite page en HTML 5 avec un <title> « très recherché » et un bloc gris arrondi grâce à la propriété CSS3 border-radius avec du texte ombré par text-shadow.
Côté transition maintenant : vous avez remarqué que dans le :hover de la div je souhaite changer la couleur de fond et du texte, ainsi que le rayon du cercle du border-radius. Jusque-là, rien de nouveau. Sauf que si vous essayez, vous vous rendrez compte que tous ces changements se font progressivement.
Hop hop hop ! La couleur du texte elle, elle change instantanément ! C'est quoi ces histoires ?
Allez, on décortique pour que vous compreniez bien l'utilisation de ces propriétés.
Si le changement de la couleur du texte n'est pas progressif, c'est tout simplement parce que la propriété color n'est pas référencée dans cette déclaration :
transition-property: background-color, border-radius;
Si j'avais ajouté color dans cette déclaration, alors le changement aurait été gradué. Faites le test et vous en aurez la preuve. Si vous voulez que tout change avec une transition, il faut mettre : transition-property: all. À l'inverse, si vous ne souhaitez rien animer, remplacez all par none.
Ensuite, nous avons transition-duration: 1s. Rien de compliqué ici puisque nous voulons que le changement de couleur de fond et des bordures se fasse en une seconde. Je laisse votre curiosité faire le reste au sujet de cette propriété.
Attention quand même, par défaut, la durée de l'animation est à zéro. Et si c'est à zéro, bah y a pas d'animation ! Et ce n'est pas ce que l'on souhaite.
Voici la liste des propriétés pouvant être animées, donnée par le W3C (http://www.w3.org/TR/css3-transitions/):
II-B. Laissons le temps au temps▲
Comme vous le savez, parce que vous venez juste de le lire, il est possible de définir quand la transition va avoir lieu en utilisant transition-delay.
Le même exemple mais avec effet retardé :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Les transitions ? C'est trop la classe !</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
padding-top: 10px;
text-align: center;
background-color: silver;
border-radius: 20px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px black;
font-size: 30px;
/* Seuls la couleur de fond et les arrondis seront affectés par la transition */
transition-property: background, border-radius;
/* La transition se fera en une seconde */
transition-duration: 1s;
/* On retarde le lancement de la transition d'une seconde */
transition-delay: 1000ms;
}
div:hover {
background: #4282b4;
border-radius: 60px;
color: yellow;
}
</style>
</head>
<body>
<header></header>
<section>
<div><p>Un beau bloc avec des bords arrondis</p></div>
</section>
<footer></footer>
</body>
</html>
Ça se passe par ici pour essayer !
On se rend compte que l'animation se déclenche 1000 ms (oui j'ai eu le temps de compter, pas vous ?) après le survol de la div.
Cette propriété accepte deux unités de temps pour sa valeur : la seconde notée "s" et la milliseconde "ms".
II-C. C'est quand qu'on arrive ?▲
Passons maintenant à une des propriétés les plus intéressantes, j'ai nommé: transition-timing-function!
Je vais m'adresser un petit temps aux personnes utilisant jQuery UI. Je pense que vous avez déjà utilisé ou au moins entendu parler de Easing http://jqueryui.com/resources/demos/effect/easing.html ? Non ? Boh, ce n'est pas grave, on peut s'en passer maintenant !
Voici lesdites options :
- linear : vitesse de transition constante ;
- ease : vitesse rapide au début et décélère sur la fin. Valeur par défaut ;
- ease-in : accélération constante ;
- ease-out : décélération constante ;
- ease-in-out : vitesse de départ et de fin lente ;
- cubic-bezier(x, x, x, x) : pour les plus matheux d'entre vous, voici la courbe de Bézier. En gros, vous passez quatre paramètres acceptant des valeurs de 0 à 1. Un petit coup de pouce pour rédiger votre courbe de Bézier : http://matthewlein.com/ceaser/.
Mis en situation, cela donne :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
<!doctype html>
<head>
<title>Les transitions ? C'est trop la classe !</title>
<meta charset="utf-8" />
<style type="text/css">
div {
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: silver;
border-radius: 10px;
color: white;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 2px black;
margin-bottom: 10px;
margin-right: 20px;
transition-property: height, line-height;
transition-duration: 2s;
}
#div1 {
transition-timing-function: ease;
}
#div2 {
transition-timing-function: ease-in;
}
#div3 {
transition-timing-function: ease-out;
}
#div4 {
transition-timing-function: ease-in-out;
}
#div5 {
transition-timing-function: linear;
}
#div6 {
transition-timing-function: cubic-bezier(0.680, 0.550, 0.265, 1.000);
}
button {
margin-bottom: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
function go() {
for ( var i = 1; i < 7; i++ ){
document.getElementById('div' + i).style.height = "200px";
document.getElementById('div' + i).style.lineHeight = "200px";
}
}
function dego() {
for ( var i = 1; i < 7; i++ ){
document.getElementById('div' + i).style.height = "50px";
document.getElementById('div' + i).style.lineHeight = "50px";
}
}
</script>
</head>
<body>
<header>
</header>
<article>
<p><button onclick="go();">Partez !</button><button onclick="dego();">Mais pas si vite !</button></p>
<div id="div1">Fonction : EASE</div>
<div id="div2">Fonction : EASE-IN</div>
<div id="div3">Fonction : EASE-OUT</div>
<div id="div4">Fonction : EASE-IN-OUT</div>
<div id="div5">Fonction : LINEAR</div>
<div id="div6">Fonction : CUBIC-BEZIER</div>
</article>
<footer>
</footer>
</body>
</html>
Alors comme vous pouvez le constater, il y a du JavaScript. Il n'est là que pour lancer les transitions et n'est pas du tout obligatoire.
Vous noterez au passage la puissance de la fonction cubic-bezier. Avec l'aide d'un générateur, les animations seront du plus bel effet (ou avec de la chance en mettant des valeurs aléatoires).
Bref, vous savez faire des transitions ! Ce n'est pas si sorcier et ça apporte un joli plus à votre page Web. Attention toutefois à ne pas tomber dans l'excès.
II-D. Prenons un raccourci▲
Comme la plupart du temps en CSS, il existe des propriétés raccourcies. Elles combinent plusieurs autres propriétés telles que font, border, background, transition…
Oh bah tiens ! Comme par hasard je parle de transition dans cet article ! Ça tombe bien ça dit donc !?
Reprenons notre exemple :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!doctype html>
<head>
<title>Les transitions ? C'est trop la classe !</title>
<meta charset="utf-8" />
<style type="text/css">
div {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: silver;
border-radius: 20px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px black;
transition: border-radius 1s ease-in-out, background-color 500ms cubic-bezier(0.680, 0.550, 0.265, 1.000) 500ms;
}
div:hover {
background-color: #4282b4;
border-radius: 60px;
color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<header>
</header>
<article>
<div><p>Un beau bloc avec des bords arrondis</p></div>
</article>
<footer>
</footer>
</body>
</html>
C'est par ici que ça se passe pour l'exemple.
On regroupe donc toutes les propriétés que l'on a vues jusqu'à maintenant en respectant la syntaxe donnée en début d'article.
Vous aurez également remarqué que j'ai séparé par une virgule les transitions par propriété à animer.
III. L'exemple en plus▲
Vous trouverez ici un exemple, basique, de menu avec un hover animé par une transition.
Ainsi qu'un avant-goût du prochain article à venir sur les transformations.
Par ici je vous prie.
IV. Conclusion et remerciements▲
Vous savez maintenant ce qu'est une transition et comment elle se déclare. Comme je l'ai évoqué et que vous l'avez certainement vu dans mon dernier exemple, nous verrons dans un prochain chapitre l'utilisation des transformations. En espérant que vous avez fait bonne lecture.
Je tiens à remercier zoom61 et FirePrawn pour leur relecture technique, ainsi que FirePrawn, encore, pour sa relecture orthographique.