Il s'agit de rendre des modifications de propriétés CSS plus fluides.
Les transitions ne sont pas applicables à toutes les propriétés CSS, seules les propriétés numériques
(taille, opacité, positionnement, couleur) sont susceptibles de subir des transitions. Inutile d'espérer une transition entre deux polices de caractères.
Attention: les propriétés de transitions sont appliquées à l'état normal de l'élément.
Pour appliquer une transition il suffit de préciser les propriétés qu'on veut faire évoluer et le temps que doit durer cette transition.
transition-property
La propriété transition-property permet de spécifier les propriétés (1 ou plusieurs) CSS ciblées.
| transition-property : background, width, color; | 3 propriétés ciblées |
| transition-property : all; | toutes les propriétés ciblées |
| transition-property : none; | aucune propriété ciblée |
transition-duration
La propriété transition-duration permet de spécifier la durée de la transition. L'ordre des durées compte et correspond à celui des autres propriétés.
| transition-duration : 1s, 0.5s, 300ms; | 3 durées, une par propriété |
transition-timing-function
La propriété transition-timing-function permet de spécifier la forme de la transition. L'ordre des formes compte et correspond à celui des autres propriétés.
transition-duration : linear, ease-in, ease-in-out; 3 formes, une par propriété.
| transition-timing-function : linear, ease-in, ease-in-out; | 3 formes, une par propriété |
- linear: la transition suit une courbe linéaire, à la moitié de la transition la valeur de la propriété sera à la moitié
- ease-in: la transition commence doucement et s'accélère petit à petit
- ease-out: la transition commence rapidement et ralentit petit à petit
- ease-in-out: la transition commence et se termine en douceur.
- Les courbes béziers: copier-coller à partir de la console, c'est beaucoup plus simple.
Ouvrez l'onglet Elements de la console pour visualiser tous les cas possibles!
transition-delay
La propriété transition-delay permet de spécifier un délai avant le déclenchement de la transition. L'ordre des délais compte et correspond à celui des autres propriétés.
| transition-delay : 0s, 1s, 1ms; | 3 délais, un par propriété |
Regroupement des propriétés
On privilégiera la propriété regroupée pour éviter de multiplier inutilement les lignes de code
On peut regrouper les propriétés de la façon suivante: chaque propriété est détaillée et elles sont séparées par des virgules.
| transition: background 1s linear 0s, width 0.5s ease-in 1s, color 300 ms ease-in-out 1ms; |
On peut aussi utiliser all si les paramètres sont les mêmes pour toutes les propriétés:
on vise toutes les propriétés susceptibles de subir des transitions.
- all
- la durée
- la forme
- le délai
| transition:all 0.5s ease-in-out 0.3s; |
Démo
<STYLE>
body {
background:black;
}
#navi {
margin:25px;
}
#navi li{
display:inline;
}
#navi li a{
padding: 5px 15px;
font-weight:bold;
color:rgba(255,255,255,0.5);
border:solid 1px white;
border-radius:1px;
transition:all 0.5s ease-in-out 0.3s;
}
#navi li a:hover{
color:rgba(255,255,255,1);
border-radius:8px;
background:rgba(255,0,0,0.8);
}
</STYLE>
</HEAD>
<BODY>
<nav>
<ul id="navi">
<li><a href="">Home</a></li>
<li><a href="">Ma vie</a></li>
<li><a href="">Mon boulot</a></li>
<li><a href="">Mes vacances</a></li>
<li><a href="">Mon chien</a></li>
</ul>
</nav>
</BODY>
