در زبان و آموزش css و نسخه های ابتدایی آن تنها می توانستیم برای تغییر فرم یک متن، یا عکس، یا هر عنصر دیگری با موس روی آن برویم، تا شکل آن تغییر کند. مثلا نوشته ها کج، یا زیر خط دار می شدند. اما با پیشرفت و توسعه ی این زبان برنامه نویسی می توانیم در زمان ظاهر شدن، و نمایش تمام عناصر در صفحه، نحوه ی نمایش آنها را تعریف کرده، یا تغییر دهیم. انیمیشن ها در css اجازه می دهد تا بسیاری از عناصر html را بدون استفاده از آموزش جاوا اسکریپت و یا فلش جابجا کنیم، یا به زبانی ساده تر برای آنها حالتی پویا تعریف کنیم! این موضوعیست که در این مقاله قصد داریم به شما آموزش دهیم.
خصوصیت انیمیشن در css
از خصوصیات انیمیشن ها در css می توانید برای نمایش و تغییر ویژگی های آنها استفاده کنید. در خصوصیت ها باید زمان نمایش انیمیشن ها را تعریف کرد، وگرنه آنها هرگز اجرا نخواهند شد. همچنین نحوه ی ارث بری و ارجاع داده شدن به یک عنصر و ساختار آنها را هم باید مشخص کرد. شکل کلی آنها به صورت زیر است:
نکته: نام انیمیشن در قانون keyframes@ تعریف می شود؛ که این قانون در واقع تعیین رفتار یک انیمیشن را شامل می شود. هنگامی که سبک CSS را در قوانینkeyframes مشخص می کنید، انیمیشن به تدریج از زمان فعلی به سبک جدید تغییر پیدا می کند. برای نوشتن یک انیمیشن، باید آنرا را به یک عنصر مرتبط کنید.
نکته 2 : برای ساختن یک انیمیشن در css اول یک نام تعریف می کنیم و سپس مدت زمانی را که این انیمشن نمایش داده می شود مشخص خواهیم کرد.
تعریف انیمیشن
به کد های زیر دقت کنید. این یک مثال ساده از تغییر رنگ پس زمینه ی یک عنصر از ابتدای نمایش آن تا پایان اجرای آن است.
@keyframes example{
from{
Background-color: gray;
}
to {
Background-color: red;
}
}
در توضیح مثال بالا، کلمات from و to به اجرا کننده ی کد می گوید که، از زمان ابتدایی تا انتهایی طی شدن و اجرای این صفحه، تغییر رنگ پس زمینه ی آن باید چه مدت طول بکشد. بجای این کلمات میتوان از اعداد درکنار درصد نیز استفاده کرد. مثلا 10% . توجه داشته باشید که نام این انیمیشن را بعد از keyframe نوشته ایم. همانطور که مشاهده می کنید، با استفاده از این چند خط کد ساده، توانستیم یک جلوه ی انیمیشنی تعریف کنیم.
می توانید نقطه ی اولیه، یعنی fromیا صفر را تعریف نکنید. اما باید دومین مورد یعنی زمان تغییر شکل را حتما در کد بنویسید.
اتصال انیمیشن
بعد از نوشتن این کد باید انیمیشن را در css به یک عنصر متصل کنید. در این مثال ما آنرا به یک class بنام myexample متصل می کنیم.
Myexample {
background-color: red;
animation-name: example;
animation-duration: 4s; }
دستور animation-duration زمان به نمایش در آمدن این انیمیشن را تعریف می کند. اگر آنها را ننویسیم، صفر در نظر گرفته می شوند.
تأخیر یک انیمیشن در css
ویژگی تاخیر انیمیشن در css ، برای به تاخیر انداختن زمان شروع یک انیمیشن است.در ادامه ی مثال قبلی، این نمونه تا قبل از شروع انیمیشن آنرا تا 2 ثانیه به تاخیر می اندازد. این کار با استفاده از دستور animation-delay انجام می شود.
Myexample}
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
{
برای این امر، مقادیر منفی نیز مجاز می باشند. البته اگر انیمیشن با استفاده از مقادیر منفی، شروع می شود. مثلا:
animation-delay: -2s;
جمع بندی
همانطور که مشاهده کردید، با استفاده از چند تکنیک ساده می توانید صفحه ی وب با عناصر جذابتری را برای سایت خود و با استفاده از انیمیشن ها در css ایجاد نمایید. انیمیشن ها این امکان را به شما می دهند تا در هر کجا که لازم بود صفحات پویا تری ایجاد کنید. بدون اینکه لازم باشد از فلش یا نمایش ویدیو ها در صفحات وب، استفاده کنید.
