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

<style>
#animation-timing-function-ease{
 animation-timing-function : ease; 
 animation-name : animation; 
}

#animation-timing-function-linear{
 animation-timing-function : linear; 
 animation-name : animation; 
}

#animation-timing-function-ease-in{
 animation-timing-function : ease-in; 
 animation-name : animation; 
}

#animation-timing-function-ease-out{
 animation-timing-function : ease-out; 
 animation-name : animation; 
}

#animation-timing-function-ease-in-out{
 animation-timing-function : ease-in-out; 
 animation-name : animation; 
}

#animation-timing-function-step-end{
 animation-timing-function : step-end; 
 animation-name : animation; 
}

#animation-timing-function-step-start{
 animation-timing-function : step-start; 
 animation-name : animation; 
}

#animation-timing-function-step{
 animation-timing-function : step(5, end); 
 animation-name : animation; 
}

#animation-timing-function-cubic-bezier{
 animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); 
 animation-name : animation; 
}

.box{
 animation-duration : 5s; 
 animation-delay : 3s; 
 animation-iteration-count : infinite; 
 border : 1px solid #666; 
 width : 90%; 
 margin-bottom : 5px; 
 padding : 5px; 
}

@keyframes animation{
 from { width: 90% }
 to { width: 100px; }
}
</style>

<div class="box" id="animation-timing-function-ease">animation-timing-function : ease </div>
<div class="box" id="animation-timing-function-linear">animation-timing-function : linear </div>
<div class="box" id="animation-timing-function-ease-in">animation-timing-function : ease-in </div> 
<div class="box" id="animation-timing-function-ease-out">animation-timing-function : ease-out </div> 
<div class="box" id="animation-timing-function-ease-in-out">animation-timing-function : ease-in-out </div> 
<div class="box" id="animation-timing-function-step-end">animation-timing-function : step-end </div> 
<div class="box" id="animation-timing-function-step-start">animation-timing-function : step-start </div> 
<div class="box" id="animation-timing-function-step">animation-timing-function : step(5,end) </div> 
<div class="box" id="animation-timing-function-cubic-bezier">animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0) </div>