اگر Transitions را برای تغییرات ساده و نرم بین دو حالت در نظر بگیریم، Keyframes (فریمهای کلیدی) در CSS ابزاری هستند که به ما اجازه میدهند انیمیشنهای بسیار پیچیدهتر، چندمرحلهای و سفارشیسازی شده بسازیم. این روش شبیه به ساخت یک فیلم کارتونی است که در آن، شما نقاط کلیدی (Keyframes) در طول زمان را مشخص میکنید و CSS خودش حرکات بین این نقاط را محاسبه و اجرا میکند.
مفهوم Keyframes
Keyframes به شما این امکان را میدهند که در نقاط زمانی مختلف یک انیمیشن، ظاهر و وضعیت یک عنصر را دقیقاً مشخص کنید. شما میتوانید انیمیشنی را تعریف کنید که یک عنصر مثلاً:
- از نقطه A شروع کند.
- در میانهی راه به نقطه B برسد.
- کمی بچرخد.
- رنگش تغییر کند.
- و در نهایت در نقطه C متوقف شود.
این انعطافپذیری بالا، امکان ساخت انیمیشنهای بسیار خلاقانه و پویا را فراهم میکند.
چگونگی تعریف Keyframes
برای ساخت انیمیشن با Keyframes، دو مرحله اصلی وجود دارد:
- تعریف انیمیشن (با استفاده از
@keyframes):
- شما یک نام برای انیمیشن خود انتخاب میکنید (مثلاً
slideAndFadeیاbounceEffect). - سپس، وضعیتهای مختلف انیمیشن را در نقاط زمانی مشخص تعریف میکنید. این نقاط معمولاً با درصد بیان میشوند:
0%(یاfrom): نشاندهنده شروع انیمیشن.100%(یاto): نشاندهنده پایان انیمیشن.- میتوانید فریمهای میانی دیگری نیز اضافه کنید (مثلاً
25%,50%,75%) تا کنترل بیشتری بر مسیر انیمیشن داشته باشید. - در هر فریم کلیدی، شما ویژگیهای CSS مورد نظرتان را که میخواهید تغییر کنند، مشخص میکنید.
- اعمال انیمیشن به یک عنصر:
- پس از تعریف انیمیشن، باید آن را به عنصر دلخواه خود اعمال کنید. این کار با استفاده از ویژگی
animation(یا ویژگیهای زیرمجموعهی آن) انجام میشود. - ویژگیهای کلیدی که برای اعمال انیمیشن استفاده میشوند عبارتند از:
animation-name: نام انیمیشنی که تعریف کردهاید (slideAndFadeدر مثال بالا).animation-duration: مدت زمان کلی اجرای انیمیشن (مثلاً3s).animation-timing-function: سرعت اجرای انیمیشن در طول زمان (مثلاًease-in-out).animation-delay: تأخیر قبل از شروع انیمیشن.animation-iteration-count: تعداد دفعاتی که انیمیشن باید تکرار شود (مثلاًinfiniteبرای تکرار بینهایت).animation-direction: جهت اجرای انیمیشن (مثلاًalternateبرای رفت و برگشت).animation-fill-mode: تعیین میکند که استایلهای حالت اول یا آخر انیمیشن قبل یا بعد از اجرای آن روی عنصر باقی بمانند یا خیر.
کاربردها
- انیمیشنهای پیچیدهی رابط کاربری: مانند افکتهای ورود و خروج عناصر، انیمیشنهای بارگذاری، یا جلوههای بصری خاص.
- بازیهای ساده تحت وب: ایجاد حرکات کاراکترها یا عناصر بازی.
- لوگوهای متحرک یا بنرهای تبلیغاتی: جلب توجه کاربر با جلوههای بصری پویا.
- توضیح مراحل یا فرآیندها: نمایش گام به گام یک عملیات با انیمیشن.
Keyframes در CSS به طراحان وب قدرت میدهد تا فراتر از تغییرات ساده رفته و انیمیشنهای داستانی و پیچیدهای را مستقیماً در مرورگر ایجاد کنند، که این امر به زندهتر شدن و جذابیت بیشتر وبسایتها کمک شایانی میکند.
کلیدواژه ها : CSS Animations-Keyframes-انیمیشن پیچیده-طراحی وب-جلوههای بصری-انیمیشن CSS-دستور @keyframes-ویژگی animation-
