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

ساخت انمیشین و تصاویر متحرک در CSS 3 :

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

  1. تعیین تغییراتی که می خواهید در عنصر مورد نظر خود انجام دهید ، در ساختار  keyframes @.
  2. تعیین عنصر مورد نظر خود جهت اعمال تغییر با استفاده از خاصیت animation .

1 - ساختار keyfarams@ :

به وسیله ساختار  keyframes @ در CSS 3 ، شما می توانید انمیشن و تصاویر متحرک خود را ایجاد نمایید .
در ساختار keyframes @ می توانید یک یا چندین خاصیت CSS را تعیین کنید و مشخص کنید این خاصیت ها از یک مقدار به یک مقدار دیگر تغییر نمایند . برای مثال تعیین می کنید که رنگ پس زمینه یک عنصر یعنی خاصیت background از مقدار yellow به مقدار green تغییر کند . یا اینکه اندازه عرض عنصر یا همان خاصیت width از مقدار 100px به مقدار 200px تغییر نماید .
بنابراین تغییراتی که می خواهید در عنصر مورد نظرتان صورت پذیرد را در ساختار  keyframes @ تعیین می کنید . در زمان اجرای کد ، عنصر از حالت اول به صورت تدریجی به حالت دوم تغییر وضعیت پیدا می کند . این تغییر وضعیت باعث ایجاد یک انمیشن و افکت تصویری می شود .
برای مثال در یک عنصر رنگ پس زمینه از یک رنگ به رنگ دیگر تدریجا تغییر کرده و باعث می شود یک تصویر متحرک ایجاد شود .
شکل کلی استفاده از ساختار  keyframes @ در CSS و تعیین تغییراتی که می خواهید ایجاد شوند ، به صورت زیر است :
نکته مهم : این ساختار در سطح برنامه به وسیله نام آن شناسایی و فراخوانی می شود .

Syntax @ keyframes نام ساختار
    {
        from { خاصیت مورد نظر و مقدار اول آن ;}
        to { خاصیت مورد نظر و مقدار دوم آن ;}
    }

مثال : این ساختار باعث می شود رنگ پس زمینه عنصر مربوط به آن از رنگ زرد به سبز تغییر نماید :

مثال @ keyframes MyFrame
    {
        from { background: yellow ; }
        to { background: green ; }
    }


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

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

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


چند مثال از تعیین ساختار keyframes @ :

در مثال های زیر چند ساختار keyframes @ را تعیین کرده ایم که هر کدام در هنگام اجرا عمل خاصی را انجام می دهند :

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

مثال @ keyframes MyFrame
    {
        from { background: yellow ; }
        to { background: green ; }
    }

@-moz-keyframes MyFrame /* Firefox */
    {
        from { background: yellow ; }
        to { background: green ; }
    }

@-webkit-keyframes MyFrame /* Chrome */
    {
        from { background: yellow ; }
        to { background: green ; }
    }

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

مثال @ keyframes MyFrame
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }

@-moz-keyframes MyFrame /* Firefox */
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }

@-webkit-keyframes MyFrame /* Chrome */
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }


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


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

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

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