<style>
.cadre-gris { margin: 5px 0; }
.cadre-vert{ width : 350px; height : 50px; }
#exemple-style-0:hover{
height:60px;
width:400px;
border-color:red;
}
</style>
<div class="cadre-exemple" id="exemple">
<h3 id="exemple-desc">Valeur par défaut</h3>
<span>Survolez mettez votre curseur sur la zone d'effet et attendez le début de l'animation.<br>
Quittez la zone d'effet et attendez la fin de l'animation.</span>
<div class="cadre-gris">
<span id="exemple-desc-0">Valeur initiale de transition</span>
<p id="exemple-style-0" class="cadre-vert"> Effet transition.</p>
</div>
</div>
<script>
initExemple('transition', 'transition', ['width 5s ease-in-out 0s', 'width 5s ease-in-out 0s, height 3s ease-in 1s', 'width 5s ease-in-out 0s, height 3s ease-in 1s, border-color 3s ease 0s', 'none'], 1);
</script>
Effet transition.