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