انیمیشن در وبسایت‌ها و وب اپلیکیشن‌های پویا، نقش بسیار مهمی در جلب توجه و بهبود تجربه کاربر دارند. این انیمیشن‌ها با زبان نشانه‌گذاری CSS ساخته می‌شوند که در بخش‌های مختلف وبسایت مثل دکمه‌ها و لینک‌ها، منو، صفحات خوش‌آمدگویی، معرفی محصولات و خدمات، نمایش داده‌ها آمارها و بسیاری از بخش‌های دیگر استفاده می‌شوند.
در این مقاله، به معرفی انیمیشن در CSS و مراحل ساخت آن پرداخته شده است.
آنچه در این نوشته خواهیم داشت
CSS Animation چیست؟
انیمیشن در CSS یک روش برای ایجاد حرکت و جلوه‌های دینامیک بر روی عناصر وبسایت است. طراح سایت با استفاده از کدهای CSS، عناصر مختلف وبسایت را به حرکت درمی‌آورد، اندازه‌شان را تغییر می‌دهد، یا حتی رنگشان را عوض می‌کند. این انیمیشن‌ها باعث جذابیت وبسایت می‌شوند و تجربه کاربری را بهبود می‌بخشند.
برای مثال، فرض کنید که یک دکمه داریم و می‌خواهیم وقتی کاربر موس را روی آن می‌برد، دکمه به آرامی بالا بپرد. با استفاده از انیمیشن در CSS، می‌توانیم این حرکت را ایجاد کنیم و به دکمه حالتی زنده و جذاب بدهیم که توجه کاربران به آن جلب شود.
برای آشنایی بیشتر با انیمیشن در CSS، ابتدا باید با دو مفهوم keyframes و properties در CSS آشنا شویم.
بیشتر بخوانید: “راهنمای جامع CSS و نقش آن در طراحی سایت“
کی‌فریم چیست؟
Keyframes مجموعه‌ای از وضعیت‌ها هستند که مشخص می‌کنند یک عنصر چگونه در طول زمان حرکت می‌کند. به عبارت دیگر، کی‌فریم همان نقاط اصلی انیمیشن است. برنامه‌نویس مشخص می‌کند که نقاط مختلف انیمیشن در زمان‌های مختلف چه حالتی داشته باشند.
منظور از Properties در CSS چیست؟
Properties یا ویژگی‌های CSS به برنامه‌نویس اجازه می‌دهند تا خصوصیات مختلفی عناصر وبسایت را در طول زمان تغییر دهد. این تغییرات شامل transform (تغییر شکل و موقعیت)، opacity (شفافیت)، و color (رنگ) هستند، اما می‌شود هر ویژگی دیگری که در CSS قابل تغییر است نیز در آن اعمال کرد.
به عنوان مثال، با تغییر transform، می‌شود یک عنصر را به سمت بالا، پایین، راست یا چپ حرکت داد، یا حتی آن را چرخانده و تغییر اندازه داد. همچنین، با تغییر opacity، می‌شود شفافیت یک عنصر را تنظیم کرد تا از حالت پیدا به محو شدن (یا برعکس) تغییر کند. و با تغییر color، می‌شود رنگ یک عنصر را تغییر داد.
آموزش طراحی انیمیشن در CSS
مرحله اول: تعریف نقاط کلیدی انیمیشن
همانطور که گفته شد، هر انیمیشن CSS دارای مجموعه‌ای از نقاط کلیدی (Keyframes) است. نقاط کلیدی، زمان‌های مهم در انیمیشن هستند که با استفاده از درصد مشخص می‌شوند. این درصدها نشان می‌دهد در هر لحظه از انیمیشن چه تغییراتی اتفاق می‌افتد. برای مثال شروع انیمیشن (۰٪) و پایان انیمیشن (۱۰۰٪).
مرحله دوم: تعریف خصوصیات animation-name و animation-duration
خصوصیات انیمیشن، نقاط کلیدی را به یک عنصر خاص اختصاص می‌دهند و نحوه حرکت آن را تعریف می‌کنند. این دو خصوصیت برای اعمال هر نوع انیمیشنی در CSS ضروری هستند.
animation-name
خصوصیت animation-name نام نقطه کلیدی را مشخص می‌کند. هنگام نام‌گذاری انیمیشن، می‌توانید از حروف a تا z، اعداد ۰ تا ۹ و علامت‌های “-” و “_” استفاده کنید.
اگر چندین نقطه کلیدی وجود داشته باشد که انیمیشن یک عنصر را توصیف می‌کنند، آنگاه باید مقادیر متعددی برای خصوصیت animation-name تعریف شود. برای این کار می‌توانید نام کی‌فریم‌ها را با یک فاصله و کاما جدا کنید.
animation-duration
خصوصیت animation-duration مدت زمان انیمیشن را مشخص می‌کند. اگرچه انیمیشن ممکن است به‌صورت یک حلقه باشد که مرتب تکرار می‌شود، اما باید تعداد ثانیه‌ها یا میلی‌ثانیه‌های آن در خصوصیت animation-duration مشخص باشد. این خصوصیت می‌تواند با مقدار صفر یا هر مقدار مثبتی تعریف شود. مقادیر منفی مجاز نیستند.
مرحله سوم: تعریف سایر خصوصیات مورد نیاز انیمیشن
علاوه‌بر خصوصیاتی که در بخش قبل گفته شد، چند خصوصیت (Property) اصلی دیگر هم هستند که در طراحی انیمیشن در CSS مهم هستند:
۱. Animation Timing
این خصوصیت مشخص می‌کند که سرعت انیمیشن چگونه تغییر کند. برای توصیف این زمان‌بندی از عبارات زیر استفاده می‌شود:
- Linear: سرعت ثابت
- Ease-in: شروع آرام
- Ease-out: پایان آرام
- Ease-in-out: شروع و پایان آرام
۲. Animation Delay
با این خصوصیت می‌توانید تعیین کنید که انیمیشن چه زمانی شروع شود. مثلاً، اگر می‌خواهید انیمیشن ۲ ثانیه بعد از بارگذاری صفحه شروع شود، می‌توانید از این خصوصیت استفاده کنید.
۳. Animation Iteration Count
این خصوصیت تعداد تکرارهایی را که انیمیشن پخش می‌شود را مشخص می‌کند. به طور مثال، می‌توانید تعیین کنید که یک انیمیشن فقط یک بار پخش شود یا به صورت مداوم تکرار شود.
۴. Animation Direction
این خصوصیت مشخص می‌کند که انیمیشن به چه جهتی حرکت کند.
۵. Animation Fill Mode
این خصوصیت به شما امکان می‌دهد که تصمیم بگیرید ویژگی‌های CSS انیمیشن در طول و پس از اجرای انیمیشن چگونه عمل کنند. چهار حالت ممکن این خصوصیت عبارتند از:
- Normal: در این حالت، ویژگی‌های CSS تنها زمانی که انیمیشن در حال پخش است، اعمال می‌شود.
- Forwards: در این حالت، مقادیر ویژگی‌های CSS تا زمانی که انیمیشن اجرا می‌شود، باقی می‌مانند و پس از پایان انیمیشن، مقادیر آخرین کی‌فریم (آخرین مرحله از انیمیشن) بر روی المان حفظ می‌شود.
- Backwards: در این حالت، المان قبل از شروع اجرای انیمیشن مقادیر ویژگی‌های CSS را از کی‌فریم اولیه (اولین مرحله از انیمیشن) دریافت و اعمال می‌کند.
- Both: در این حالت، مقادیر ویژگی‌های CSS هم قبل از شروع اجرای انیمیشن و هم پس از پایان آن اعمال می‌شود.
۶. (Animation Play State)
این خصوصیت به شما امکان می‌دهد تا انیمیشن را متوقف کنید یا ادامه دهید. مثلا، اگر می‌خواهید یک انیمیشن را متوقف کنید، می‌توانید از حالت “paused” استفاده کنید.
انواع انیمیشن در CSS
در انیمیشن CSS، می‌شود انواع مختلفی از حرکات و جلوه‌ها را ساخت که به صورت دینامیک در صفحات وبسایت نمایش داده شوند. در این بخش برخی از انواع متداول انیمیشن‌ها در CSS بررسی شده است:
Fade In .۱ (ظاهر شدن):
در این نوع انیمیشن، عنصر به آرامی ظاهر می‌شود. برای این کار از خصوصیت opacity برای تعیین شفافیت عنصر استفاده می‌شود. به عنوان مثال:
fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
Fade Out .۲ (ناپدید شدن):
در این نوع انیمیشن، عنصر به آرامی ناپدید می‌شود. برای این کار مقدار خصوصیت opacity از مقدار اولیه، به صفر تغییر می‌کند.
Slide In/Out .۳ (لغزش به داخل/خارج):
با استفاده از خصوصیت‌های transform و translate, می‌شود عناصر را به سمت چپ، راست، بالا یا پایین لغزاند. به عنوان مثال:
slide-in {
transform: translateX(-100%);
animation: slideIn 1s forwards;
}
@keyframes slideIn {
to {
transform: translateX(0);
}
}
Rotate .۴:
با خصوصیت transform و زاویه‌ی چرخش، می‌توانید عناصر را به دور محور خود بچرخانید. به عنوان مثال:
rotate {
transform: rotate(45deg);
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
Scale .۵ (بزرگنمایی/کوچکنمایی):
با خصوصیت transform و Scale، می‌توانید عناصر را به شکل بزرگ‌تر یا کوچک‌تر نمایش دهید. به عنوان مثال:
scale-up {
transform: scale(1.5);
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
to {
transform: scale(1);
}
}
Bounce .۶:
این نوع انیمیشن باعث می‌شود عناصر به طور تکراری و با سرعت کمتر پرش کنند. برای تعریف مراحل پرش می‌توانید از کی‌فریم (keyframes) استفاده کنید. به عنوان مثال:
bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Pulse .۷:
این نوع انیمیشن باعث می‌شود عناصر به صورت متناوب بزرگ و کوچک شوند. می‌توانید از keyframes برای تعریف مراحل نبض استفاده کنید. به عنوان مثال:
pulse {
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
Shake .۸:
با استفاده از keyframes، می‌توانید در عناصر دلخواه لرزش ایجاد کنید. به عنوان مثال:
shake {
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
ابزارهای تولید انیمیشن در CSS
CSS Animation Generator ابزارهایی هستند که به برنامه‌نویس امکان می‌دهند تا بدون نیاز به نوشتن کدهای پیچیده، به راحتی انیمیشن‌های CSS را ایجاد کند.
در این ابزارها کافی است طرح و انیمیشن مورد نظر را انتخاب کنید، کدهای CSS مربوط به آن طرح به‌صورت خودکار تولید می‌شود. استفاده از این ابزارها کمک می‌کند تا فرآیند ایجاد انیمیشن ساده‌تر و کارآمدتر باشد و مدت زمان کدنویسی کاهش پیدا کند. سه ابزار تولید انیمیشن در CSS محبوب و کاربردی، عبارتند از:
- Animista
- CSS Animations Generator
- Keyframes App
بیشتر بخوانید: “راهنمای کاربردی طراحی وبسایت زیبا (بخش اول)“
جمع‌بندی
انیمیشن در CSS به طراحان وبسایت و وب اپلیکیشن کمک می‌کند تا روح تازه‌ای به وبسایت ببخشند و با طراحی یک محصول دیجیتال پویا و دینامیک، تجربه دلپذیری را برای کاربران ایجاد کنند.
طراحی وبسایت‌های پویا زمان زیادی است که به‌عنوان یکی از ترندهای طراحی سایت در سالیان اخیر مورد توجه بوده است.
در دوره آموزش طراحی سایت آکادمی آمانج، یک سرفصل اختصاصی برای طراحی سایت پویا تعریف شده که صفر تا صد یک پروژه عملی را انجام خواهید داد.
