آموزش CSS 3 - ساخت انمیشن و تصاویر متحرک - مرحله اول
ساختار keyframes @
ساخت انمیشین و تصاویر متحرک در CSS 3 :
در CSS 3 شما می توانید انمیشن های ساده ای بسازید که جایگزین عکس های متحرک ، فایل
های فلش و یا ساختار های گرافیک در صفحات وب باشند .
جالب توجه است که شما می توانید این انمیشن ها و تصاویر متحرک را بدون نیاز به هیچ
برنامه گرافیکی جانبی و فقط با نوشتن کدهای ساده در CSS 3 ایجاد نمایید .
در تصاویر متحرکی که در CSS 3 ساخته می شود شما می توانید کاری کنید که یک عنصر از
یک شکل و اندازه ، به صورت تدریجی به یک شکل و اندازه دیگر تغییر وضعیت دهد و این تغییر
باعث می شود ، تا یک افکت تصویری ایجاد شود .
در این مطلب قصد داریم تا روش ساخت تصاویر متحرک در CSS 3 را به شما آموزش دهیم . البته
این کار در چند مرحله انجام می شود که به ترتیب به شرح آنها می پردازیم .
برای این منظور 2 مرحله اصلی زیر را باید انجام دهید :
- تعیین تغییراتی که می خواهید در عنصر مورد نظر خود انجام دهید ، در ساختار keyframes
@.
- تعیین عنصر مورد نظر خود جهت اعمال تغییر با استفاده از خاصیت 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 ; }
}
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :