Exemple de code de la propriété CSS transition-timing-function.

<style type="text/css">
.box{ width:250px; height:50px; border:1px solid red; margin-bottom:0.5em; 
 transition-property : width; 
 transition-duration : 2s; 
}
.boxanime{ width:100%; }
#transition-ease{ transition-timing-function : ease }
#transition-linear{ transition-timing-function : linear }
#transition-ease-in{ transition-timing-function : ease-in }
#transition-ease-out{ transition-timing-function : ease-out }
#transition-ease-in-out{ transition-timing-function : ease-in-out }
#transition-step-end{ transition-timing-function : step-end }
#transition-step-start{ transition-timing-function : step-start }
#transition-steps-start{ transition-timing-function : steps(10, start) }
#transition-steps-end{ transition-timing-function : steps(10, end) }
#transition-cubic-bezier{ transition-timing-function : cubic-bezier(0.015, 1.265, 0.895, 0.170); }
</style>
Cliquez sur un bloc.<br/>
<div class="box" id="transition-ease">transition-timing-function : ease</div>
<div class="box" id="transition-linear">transition-timing-function : linear</div>
<div class="box" id="transition-ease-in">transition-timing-function : ease-in</div> 
<div class="box" id="transition-ease-out">transition-timing-function : ease-out</div> 
<div class="box" id="transition-ease-in-out">transition-timing-function : ease-in-out</div> 
<div class="box" id="transition-step-end">transition-timing-function : step-end</div> 
<div class="box" id="transition-step-start">transition-timing-function : step-start</div> 
<div class="box" id="transition-steps-start">transition-timing-function : steps(10, start)</div> 
<div class="box" id="transition-steps-end">transition-timing-function : steps(10, end)</div> 
<div class="box" id="transition-cubic-bezier">transition-timing-function : cubic-bezier</div>
<script type="text/javascript">
/* Lance toutes les transitions en même temps */
$(".box").on('click', function(e){var obj = $(e.currentTarget); if(obj.hasClass('boxanime')){$(".box").removeClass("boxanime"); }
else{$(".box").addClass("boxanime"); }}
); </script>