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


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

آموزش CSS 3 - ساخت انمیشن و تصاویر متحرک - مرحله دوم
خاصیت animation

خاصیت animation :

در مرحله اول از طراحی تصاویر متحرک و انمیشن در CSS 3 ، یا ساختار keyframes @ آشنا شدید . در این ساختار ، تغییراتی که می خواستید در فرآیند انمیشین بر روی عنصر اعمال شود را تعیین می کردید . پس از تعیین این تغییرات ، بایستی در مرحله دوم ، ساختار keyframes @تعیین شده را به عنصر مورد نظرتان مرتبط سازید .
توسط خاصیت animation در CSS 3 ، ساختار keyframes @ مورد نظرتان را به عنصر مرتبط می سازید . در این خاصیت همچنین می توانید نام ساختار keyframes @ مورد نظر ، مدت زمان اجرای افکت ، تاخیر احتمالی در فرآیند اجرای آن و یا تعداد دفعات تکرار را تعیین نمایید .

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

Syntax animation :   name   duration   timing-function   delay   iteration-count   direction ;

نکته مهم : خاصیت animation مخفف و ساده شده 6 خاصیت زیر است  :

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction

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

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر نام ساختار keyframes @ مورد نظر برای اجرا بر روی عنصر را تعیین می کند . تغییرات پیش بینی شده در ساختار ، در هنگام اجرای فرآیند بر روی عنصر مورد نظر اعمال خواهند شد .
تعیین این پارامتر اجباری است .
name
این خاصیت مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت داده و تغییرات بر روی آن اعمال شوند ، را بر حسب ثانیه تعیین می کند . مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود .
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار 0 را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت .
duration
این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است . timing-function
این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند . برای مثال اگر 3 ثانیه تعیین شود ، افکت پس از 3 ثانیه فعال خواهد شد . delay
این پارامتر تعداد دفعاتی که قرار است افکت تصویری تکرار شور را تعیین می کند . می توان دفعات محدودی برای آن تعیین کرد و یا انجام آن را بی نهایت قرار داد . iteration-count
این پارامتر تعیین می کند که آیا افکت در جهت عادی انجام شود . یا در حالت برعکس . direction

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


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

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

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


چند مثال از کاربرد خاصیت animation :

در مثال های زیر ابتدا چند ساختار keyframes @ را تعیین کرده و آنها را به وسیله خاصیت animation به عنصر مورد نظرمان متصل کرده ایم . این کدها باعث ساخت تصاویر متحرک با عناصر شده است :

مثال 1 : در مثال اول یک ساخنار تعیین کرده ایم که پس زمینه یک عنصر را  در مدت 3 ثانیه  و فقط برای 1 بار از رنگ قرمز به رنگ زرد تغییر می دهد . در این ساختار کد لازم برای سازگاری با انواع مرورگرها قرار داده شده است :

< html >;
  < head >
    < style >
     @keyframes chColor
        {
           from {background: red;}
           to {background: yellow;}
        }
     @-moz-keyframes chColor /* Firefox */
        {
           from {background: red;}
           to {background: yellow;}
        }
     @-webkit-keyframes chColor /* Chrome */
        {
           from {background: red;}
           to {background: yellow;}
        }

      div
        {
          animation: chColor 3s;
          -moz-animation: chColor 3s;    /* Firefox */
          -webkit-animation: chColor 3s ;    /* Chrome */
        }

    < /style >

  </head>
<body>
    < div >
      Developer Studio Network
    < /div >

</body>
</html>
کد
خروجی

مثال 1 : در مثال دوم ساختار دیگری را تعیین کرده ایم که پس زمینه یک عنصر و موقعیت قرار گیرا آن را در یک سیکل تعیین شده در صفحه تغییر می دهد .  این تغییر یک افکت تصویری زیبا را ایجاد کرده است .در این ساختار کد لازم برای سازگاری با انواع مرورگرها قرار داده شده است :
توجه شود در این مثال با قرار دادن مقدار نامحدود برای خاصیت iteration-count ، باعث شده ایم این افکت به صورت نامحدود اجرا شود .

< html >;
  < head >
    < style >
      @keyframes myfirst
         {
            0% {background: red; left:0px; top:0px;}
            25% {background: yellow; left:200px; top:0px;}
            50% {background: blue; left:200px; top:200px;}
            75% {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
         }
      @-moz-keyframes myfirst /* Firefox */
         {
            0% {background: red; left:0px; top:0px;}
            25% {background: yellow; left:200px; top:0px;}
            50% {background: blue; left:200px; top:200px;}
            75% {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
         }
      @-webkit-keyframes myfirst /* Safari and Chrome */
         {
            0% {background: red; left:0px; top:0px;}
            25% {background: yellow; left:200px; top:0px;}
            50% {background: blue; left:200px; top:200px;}
            75% {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
         }
      div
        {
          width:100px;
          height:100px;
          background:red;
          position:relative;
           animation : myfirst 5s infinite;
          -moz-animation : myfirst 5s infinite;    /*Firefox*/
          -webkit-animation : myfirst 5s infinite;    /*Chrome*/
        }

    < /style >

  </head>
<body>
    < div >
      Developer Studio Network
    < /div >

</body>
</html>
کد
خروجی


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


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

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

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