تبلیغات متنی و بنر

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

خاصیت transition :

خاصیت transition به همراه افکت هایی که با آن به کار می برید ، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد .
برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد ، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید . سپس هنگامی که کاربر موس خود را از روی آن می برد ، به انداز قبلی و کوچک خود بر گردد .
به وسیله خاصیت transition در CSS 3 ، می توانید تغییر اندازه ، شکل ،رنگ ، موقعیت و ... یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید .
برای این منظور شما بایستی 3 مرحله زیر را انجام دهید :

  1. عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید .
  2. تغییری که در عنصر می خواهید اعمال نمایید را به وسیله خواص CSS تعیین کنید . مثلا می خواهید اندازه یا رنگ یک عنصر را تغییر دهید .
  3. مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای آن را تعیین نمایید .

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

Syntax transition: property   duration   timing-function   delay ;
مثال : transition : width   2s   ease   1s ;

نکته مهم : خاصیت transition مخفف و ساده شده 4 خاصیت زیر است .

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

شما می توانید این 4 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید .

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر تعیین کننده خاصیتی است که شما می خواهید آن را در عنصر مورد نظرتان تغییر دهید . برای مثال این خاصت می تواند عرض عنصر ( خاصیت width ) یا رنگ آن ( خاصیت color ) باشد .
تعیین این پارامتر اجباری است . 		property
این خاصیت مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت دهد را بر حسب ثانیه تعیین می کند . مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود .
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار 0 را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت . 		duration
این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است . timing-function
این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند . برای مثال اگر 3 ثانیه تعیین شود ، افکت پس از 3 ثانیه فعال خواهد شد . delay

در مثال های عملی در انتهای صفحه ، کاربرد این خاصیت را به صورت عملی به شما نمایش داده ایم .


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

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

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

مثال های عملی :

در مثال های عملی زیر سعی کرده ایم تا مطالب ارائه شده درباره خاصیت transition را به صورت عملی به شما نمایش داده ایم . دقت کنید که این مثال ها در مرورگر IE درست کار نمی کنند و برای هر مرورگر کد مربوط به آن قرار داده شده است :

مثال 1 : در مثال اول یک تگ < div > را در صفحه قرار داده ایم که در ابتدا عرض آن ( خاصیت width ) برابر با 100px است ، که با کد طراحی شده ، در زمانی که کاربر موس خود را روی آن می برد ، عرضش در یک افکت تصویری با یک تاخیر 1 ثانیه ای در مدت 2 ثانیه به مقدار 300px افزایش می یابد :

< html >;
  < head >
    < style >
      div
        {
           transition: width 2s ease 1s ; ;
           -moz-transition: width 2s ease 1s ;
           -webkit-transition: width 2s ease 1s ;
           -o-transition: width 2s ease 1s
           width: 100px;
           height: 100px;
        }
      div:hover
        {
           width : 300px ;
           height : 100px ;
        }
    < /style >
  </head>
<body>
    < div >
      Our site is : Developer Studio Network
    < /div >
</body>
</html> 		کد
Our site is :       Developer Studio Network
 خروجی

مثال 2 : در مثال دوم یک عکس را در صفحه قرار داده ایم که کوچک شده عکس اصلی است . هدف این است هنگامی که کاربر موس خود را بر روی آن می برد ، در مدت زمان 2 ثانیه بزرگ شده و به اندازه واقعی دربیاید . پس از اینکه کاربر موس خود را از روی آن برداشت ، باز کوچک شده و حالت اول برگردد :

< html >;
  < head >
    < style >
      img
        {
           transition: width 2s , height 2s ;
           -moz-transition: width 2s, height 2s;
           -webkit-transition: width 2s, height 2s;
           -o-transition: width 2s, height 2s;
           width: 40px;
           height: 20px;
        }
      img:hover
        {
           width : 400px ;
           height : 200px ;
        }
    < /style >
  </head>
<body>
    < img   src = " ../Pic/Banner.gif " >
</body>
</html> 		کد
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟