transition
La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que :hover ou :active ou être définis dynamiquement avec JavaScript.
La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.
Chacune des propriétés de transtition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales all et none). Une propriété de transition inclut :
- zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
le mot-clé none
le mot-clé all
Un identifiant qui nomme une propriété CSS.
- zéro ou une valeur qui représente la fonction de temporisation utilisée pour la transition
- zéro, une ou deux valeurs de temps. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété transition-duration et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété transition-delay.
Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.
<style>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
<div class="box"></div>
Passez la souris sur le carré