آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

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

خاصیت transition-property :

خاصیت transition-property ، تعیین کننده خاصیتی است که در طی فرآیند انیمیشن در عنصر از یک مقدار اولیه به مقدار ثانویه تغییر خواهد کرد .
برای مثال می توان خاصیت width ( پهنای عنصر ) یا رنگ ( color ) ، عنصر باشد .
در طی فرآیند انیمیشن مثلا width عنصر ا ز 100 پیکسل به 300 پیکسل ، یا رنگ آن از زرد به آبی تغییر می کند .
نکته : معمولا عملیات انیمیشن با رفتن موس بر روی عنصر ( متد hover ) فعال می شود .

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

Syntax transition-property : none | all | property ;

syntax توضیح موارد
توضیح مقدار
هیچ خاصیتی در عنصر تغییر نکرده و عمل انیمیشن انجام نمی شود .
none
همه خواص تعیین شده برای عنصر تغییر خواهند کرد و انمیشن اجرا می شود .
این مقدار ، مقدار پیش فرض است .
all
 یک خاصیت تعیین شده و در طی عمل tranistion تغییر می کند . مثلا خاصیت width . property

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

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

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

مثال :

در مثال زیر با استفاده ار خاصیت 8 ، پهنا و ارتفاع

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

    < /style >

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


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


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

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

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