آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت transition-timing-function

خاصیت transition-timing-function :

خاصیت transition-timing-function ، نحوه و سرعت اجرای انیمیشن را تعیین می کند .

 بوسیله این خاصیت می توانید سرعت اجرای انیمیشن را در ابتدا وسط و انتهای آن بنا بر سلیقه خود کم و یا زیاد کنید .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out ;
این خاصیت می تواند یکی از مقادیر زیر را داشته باشد ، که هر کدام یک افکت خاص را به اجرای خاصیت می دهند :
transition-timing-function  انواع موارد ممکن برای خاصیت
توضیح مقدار
در این حالت سرعت اجرای انیمیشن از ابتدا تا انتهای آن یکسان است .  liner
در این حالت افکت ابتدا آهسته ، در میانه سریع و در انتها مجددا آهسته می شود .  
مقدار ease ، مقدار پیش فرض خاصیت است .
ease
در این حالت افکت با سرعت آهسته شروع شده و سپس سریع می شود .   ease-in
در این حالت افکت با سرعت زیاد شروع شده و سپس آهسته می شود .   ease-out
در این حالت افکت با سرعت آهسته شروع شده و سپس آهسته نیز پایان می یابد . ease-in-out

پشتیانی در مرورگر های مختلف :

متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :

کد لازم برای پشتیانی نوع مرورگر
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-transition-delay- بنویسید .
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-transition-delay- بنویسید .
این خاصیت پشتیانی نمی شود .
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-transition-delay- بنویسید .

مثال :

در مثال زیر با استفاده از خاصیت transition یک افکت تصویری را ایحاد کرده ایم  . سپس دو حالت از خاصیت 8 را در عمل نمایش داده ایم . مابقی حالت ها را نیز امتحان کنید :

< html >;
  < head >
    < style >
      img
        {
          width:100px;
           height:100px;
           transition-property: width,height;
           transition-duration: 5s;
           transition-timing-function: ease;
          -moz-transition-property: width,height; /* Firefox 4 */
          -moz-transition-duration: 5s; /* Firefox 4 */
          -moz-transition-timing-function:ease; /* Firefox 4 */
          -webkit-transition-property: width,height; /* Safari and Chrome */
          -webkit-transition-duration: 5s; /* Safari and Chrome */
          -webkit-transition-timing-function: ease; /* Safari and Chrome */
          -o-transition-property: width,height; /* Opera */
          -o-transition-duration: 5s; /* Opera */
          -o-transition-timing-function: ease; /* Opera */
        }
      img:hover
        {
           width : 400px ;
           height : 200px ;
        }

    < /style >

  </head>
<body>
    < img   src = " ../Pic/Banner.gif " >
</body>
</html>
 

حالت ease



حالت ease-in

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟