Exemple de code de la propriété JS / CSS transitionTimingFunction.

<style>
.cadre-gris { margin: 5px 0; }
.cadre-vert{ width : 350px; height : 50px; }
.transition { transition-duration : 5s; }
#exemple-style-0:hover{ 
  width:500px; 
  border-color:red; 
  transition-property : width, border-color; 
}
#exemple-style-01:hover{
  height:60px; 
  width:500px; 
  border-color:red; 
  transition-property : width, height, border-color; 
 
}
</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, la bordure redevient verte.</span>
    <div class="cadre-gris">
       <span id="exemple-desc-0">Valeur initiale de transitionTimingFunction</span>
       <p id="exemple-style-0" class="cadre-vert transition width"> Effet transitionTimingFunction.</p>
    </div>
</div>
<div class="cadre-exemple cadre-clickme" id="exemple1">
    <h3 id="exemple-desc1">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, la bordure redevient verte.</span>
    <div class="cadre-gris">
       <span id="exemple-desc-01">Valeur initiale de transitionTimingFunction</span>
       <p id="exemple-style-01" class="cadre-vert transition"> Effet transitionTimingFunction.</p>
    </div>
</div>
<script>
initExemple('transition-timing-function', 'transitionTimingFunction', ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'], 1); 
initExemple('transition-timing-function', 'transitionTimingFunction', ['linear, ease-in', 'ease-in-out, ease-out,', 'ease-in-out, linear'], 1, 1); 
</script>