توابعی برای تعیین نوع اجرای انیمیشن وجود داره به اسم timing-function ، که برای حرکت دادن هر المنت میشه از اون ها استفاده کرد. نمونه استفاده از توابع زمانبندی ، ها هستن. 1 -webkit-transition: all 1s ease; که در اینجا ease یک تابع زمانبندیه. انواع توابع زمانبندی: linear در این تابع، در طول زمان حرکت، سرعت ثابته و تغییری نمیکنه. ease-in با استفاده از این تابع، حرکت با سرعت کم آغاز میشه و به تدریج به سرعت normal میرسه. ease-out با سرعت normal حرکت میکنه و در انتها، از سرعتش کم میشه. ease-in-out در این تابع، حرکت با سرعت کم آغاز میشه، به اوج میرسه و در انتها، دوباره سرعت کم میشه یک کد نمونه برای هر 4 حالت : 1 @-webkit-keyframes tfs{from{margin-left:0px;}to{margin-left:300px;}} 2 .divtfs *{width:100px; height:25px; background:#FFCA4F; border:1px solid #F90; margin-bottom:2px; text-align:center} 3 .div1tfs{-webkit-animation:tfs 3s linear infinite alternate;} 4 .div2tfs{-webkit-animation:tfs 3s ease-in infinite alternate;} 5 .div3tfs{-webkit-animation:tfs 3s ease-out infinite alternate;} 6 .div4tfs{-webkit-animation:tfs 3s ease-in-out infinite alternate;} 1 <div class="divtfs"> 2 <div class="div1tfs">linear</div> 3 <div class="div2tfs">ease-in</div> 4 <div class="div3tfs">ease-out</div> 5 <div class="div4tfs">ease-in-out</div> 6 </div>
