در مطالب قبلی در مورد ساخت انمیشن و تصاویر متحرک در زبان CSS3 مطالبی را در حد مقدماتی خدمت شما ارائه کردیم و گفتیم که برای ساخت انیمیشن در این زبان باید دومرحله را طی کرد که یکی از آن ها ساختار keyfarams@ بود.دراین مطلب قصد داریم تا این ساختار را به طور کامل برای شما تشریح و بررسی کنیم.
– ساختار keyfarams@ :
به وسیله ساختار keyframes @ در CSS 3 ، شما می توانید انمیشن و تصاویر متحرک خود را ایجاد نمایید.
در ساختار keyframes @ می توانید یک یا چندین خاصیت CSS را تعیین کنید و مشخص کنید این خاصیت ها از یک مقدار به یک مقدار دیگر تغییر نمایند . برای مثال تعیین می کنید که رنگ پس
زمینه یک عنصر یعنی خاصیت background از مقدار yellow به مقدار green تغییر کند . یا اینکه اندازه عرض عنصر یا همان خاصیت width از مقدار ۱۰۰px به مقدار ۲۰۰px تغییر نماید.
بنابراین تغییراتی که می خواهید در عنصر مورد نظرتان صورت پذیرد را در ساختار keyframes @ تعیین می کنید . در زمان اجرای کد ، عنصر از حالت اول به صورت تدریجی به حالت دوم
تغییروضعیت پیدا می کند . این تغییر وضعیت باعث ایجاد یک انمیشن و افکت تصویری می شود .
برای مثال در یک عنصر رنگ پس زمینه از یک رنگ به رنگ دیگر تدریجا تغییر کرده و باعث می شود یک تصویر متحرک ایجاد شود .
شکل کلی استفاده از ساختار keyframes @ در CSS و تعیین تغییراتی که می خواهید ایجاد شوند ، به صورت زیر است :
نکته مهم : این ساختار در سطح برنامه به وسیله نام آن شناسایی و فراخوانی می شود .
نام ساختارSyntax: @ keyframes
}
{; خاصیت مورد نظر و مقدار اول آن } from
{; خاصیت مورد نظر و مقدار دوم آن }to
{
مثال : این ساختار باعث می شود رنگ پس زمینه عنصر مربوط به آن از رنگ زرد به سبز تغییر نماید :
keyframes MyFrame@
}
{; from { background: yellow
{; to { background: green
{
