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

خاصیت transition-duration :

خاصیت transition-duration ، مدت زمان اجرای فرایند انیمیشن را برای عنصر مشخص می کند .
برای مثال اگر قرار است عرض عنصر از مقدار 100 px به 300 px افزایش یابد ، این عمل در مدت 4 ثانیه انجام می شود .

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

Syntax transition-duration : time ;

syntax توضیح موارد
توضیح مقدار
مدت زمان اجرای انیمیشن را بر حسب میلی ثانیه ( ms )  یا ثانیه ( s ) تعیین می کند .
استفاده از این پارامتر اجباری است .
مقدار پیش فرض این پارامتر صفر است و به این معناست که انیمیشن انجام نمی شود . بنابراین حتما باید آن را مقدار دهی کنید .
time

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

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

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

مثال :

در مثال زیر با استفاده از خاصیت transition یک افکت تصویری را ایحاد کرده ایم  . برای این افکت با استفاده از خاصیت   transition-duration مدت زمان اجرای  5 ثانیه تعیین شده است  :

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

    < /style >

  </head>
<body>
    < img   src = " ../Pic/Banner.gif " >
</body>
</html>
 
خروجی


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


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

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

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