آموزش 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 ;
|
این خاصیت می تواند یکی از مقادیر زیر را داشته باشد ، که هر کدام یک افکت خاص را به
اجرای خاصیت می دهند :
|
توضیح
|
|
در این حالت سرعت اجرای انیمیشن از ابتدا تا انتهای آن یکسان است .
|
در این حالت افکت ابتدا آهسته ، در میانه سریع و در انتها مجددا آهسته می شود .
مقدار ease ، مقدار پیش فرض خاصیت است .
|
|
در این حالت افکت با سرعت آهسته شروع شده و سپس سریع می شود .
|
|
در این حالت افکت با سرعت زیاد شروع شده و سپس آهسته می شود .
|
|
در این حالت افکت با سرعت آهسته شروع شده و سپس آهسته نیز پایان می یابد .
|
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت در مرورگر 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
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :