سلام! توی این درس قراره با انیمیشنهای CSS آشنا بشیم،
خب بدونمقدمه بریم سراغ یه صفحهی نمونه. که از درس های قبل داشتیم
📱 اینجا داخل مرورگر وب، به این باکس آبی دقت کنید.
وقتی صفحه رو رفرش میکنم…
میبینیم که باکس بهصورت محو شده وارد صفحه میشه. اما یه نکتهی مهم اینجا هست:
برخلاف transition، لازم نیست روی چیزی هاور کنیم تا این انیمیشن اجرا بشه.
یه نگاه دقیقتر بندازیم…
با یه رفرش دیگه، میبینیم که باکس فقط از یه مقدار عمودی به مقدار دیگه منتقل نمیشه، بلکه یه حالت پرشمانند داره.
باکس میاد پایین، به موقعیت اصلی خودش میرسه، و بعد یه کم بالا و پایین میپره.
👨🔧 پشت صحنه، من این صفحهی نمونه رو تغییر دادم. حالا وقتی رفرش کنیم، بهجای یه باکس آبی، چهار تا باکس داریم.
این افکتیه که احتمالاً توی خیلی از سایتها دیدین بچه ها—جایی که بخشهای برجستهی محتوا یکییکی و با افکت محو وارد صفحه میشن.
انیمیشنهای CSS انجام این کار رو خیلی راحت میکنن.
و باز هم برخلاف transition، این افکت نیازی به کلیک یا هاور نداره.
فقط یه انیمیشنه که میتونه با بارگذاری صفحه شروع بشه.
🎯 هدفمون توی این درس اینه که با هم کد رو بازنویسی کنیم تا افکت پرش (bounce) رو بسازیم.
همینطور کدی که زمانبندی چهار باکس رو کنترل میکنه بازنویسی میکنیم تا همهشون همزمان محو نشن، و یکییکی و با فاصلهی زمانی وارد بشن.
و در نهایت، یه بخش دیگه از محتوا رو معرفی میکنم تا اشتیاقت برای انیمیشنهای CSS بیشتر بشه.
✨ یه ستاره هم داریم که پشت صحنه براش یه کد اضافه کردم. وقتی صفحه رو رفرش کنیم، میبینیم که ستاره یه انیمیشن خاص داره که مدام تکرار میشه.
وقتی کارمون با باکسهای آبی تموم شد، یاد میگیریم چطور ستاره رو هم به همین سبک انیمیت کنیم.
فکر میکنم خیلی خوش بگذره. پس بزن بریم!
🧹 خب، پشت صحنه همهی کدهای مربوط به انیمیشنها رو حذف کردم.
ستاره و سه باکس اضافه هم حذف شدن.
الان توی نقطهی شروع هستیم—فقط یه باکس آبی برجسته داریم.
خب بریم با هم افکت پرش رو بسازیم.
📁 توی فایل CSS، یه بخش کامنت جدید میسازیم تا مرتب بمونیم.
اول باید انیمیشن رو تعریف و نامگذاری کنیم.
برای شروع انیمیشن، از علامت @ استفاده میکنیم و مینویسیم:
@keyframes fadeBounce {
/* کد انیمیشن اینجا قرار میگیره */
}
من اسم این انیمیشن رو میذارم fadeBounce، ولی تو میتونی هر اسمی که دوست داری انتخاب کنی.
بین این دو براکت، کدی رو مینویسیم که انیمیشن رو تشکیل میده.
فعلاً این انیمیشن رو به هیچ محتوایی اعمال نمیکنیم.
داریم یه قطعه کد مستقل میسازیم که بعداً میتونیم به هر محتوایی که خواستیم اعمالش کنیم.
🔹 وقتی انیمیشن ۰٪ کامل شده (یعنی تازه شروع شده)، میخوایم محتوا opacity صفر داشته باشه—یعنی نامرئی باشه.
و میخوایم یه کم بالاتر از موقعیت نهایی خودش باشه تا افکت سر خوردن و محو شدن به پایین رو بده.
0% {
opacity: 0;
transform: translateY(-200%);
}
🔹 وقتی انیمیشن ۱۰۰٪ کامل شده، یعنی تموم شده، میخوایم محتوا کاملاً قابل دیدن باشه و در موقعیت عمودی طبیعی خودش قرار بگیره:
100% {
opacity: 1;
transform: translateY(0);
}
اما فقط این دو حالت کافی نیستن تا افکت پرش ایجاد بشه.
بعداً برمیگردیم سراغ این کد تا افکت bounce رو بسازیم.
فعلاً یه انیمیشن به اسم fadeBounce داریم که میتونیم به المنتها اعمال کنیم.
📦 میدونیم که این باکس آبی یه کلاس به اسم box-a داره.
پس توی CSS مینویسیم:
.box-a {
animation-name: fadeBounce;
animation-duration: 1s;
}
اگه ذخیره کنیم و صفحه رو رفرش کنیم، میبینیم که انیمیشن اجرا میشه.
البته هنوز bounce نیست، ولی انیمیشن fadeBounce داره با بارگذاری صفحه اجرا میشه.
اگه مدت زمان رو به ۳ ثانیه افزایش بدیم، انیمیشن خیلی کند اجرا میشه—که نمیخوایم.
پس دوباره برش میگردونیم به ۱ ثانیه.
حالا تمرکزمون رو میذاریم روی قانون keyframes و حالتهای میانی بین ۰٪ و ۱۰۰٪ رو اضافه میکنیم تا افکت bounce واقعی ایجاد بشه.
🔸 در ۴۰٪ از انیمیشن، میخوایم باکس کاملاً قابل دیدن باشه و در موقعیت طبیعی خودش قرار بگیره:
40% {
opacity: 1;
transform: translateY(0);
}
🔸 در ۵۵٪، میخوایم یه پرش کوچیک به بالا داشته باشه—حدود ۶ پیکسل:
55% {
transform: translateY(-6px);
}
🔸 در 70٪، دوباره به موقعیت طبیعی خودش برگرده:
70% {
transform: translateY(0);
}
🔸 در 85٪، یه پرش کوچیکتر—حدود ۳ پیکسل:
85% {
transform: translateY(-3px);
}
🔸 و در نهایت، در 100٪، به موقعیت نهایی خودش برگرده:
100% {
transform: translateY(0);
}
حالا اگه ذخیره کنیم و صفحه رو رفرش کنیم، میبینیم که افکت bounce اجرا میشه.
یه بار دیگه رفرش کنیم… عالیه!
اما حس میکنم opacity خیلی زود به ۱ میرسه.
پس خط مربوط به opacity رو از ۴۰٪ به ۷۰٪ منتقل میکنم تا دیرتر قابل دیدن بشه.
👀 حالا افکت نهایی رو داریم—یه تفاوت ظریف ولی مؤثر.
🧱 حالا میرم سراغ HTML و سه باکس آبی دیگه رو برمیگردونم.
چهار تا باکس رو میبینیم، ولی همشون همزمان وارد صفحه میشن.
میخوایم زمانبندیشون رو پلهپله کنیم.
بهصورت پیشفرض، انیمیشنها بلافاصله با بارگذاری صفحه اجرا میشن.
برای باکس اول مشکلی نیست، ولی برای بقیه باید تأخیر بذاریم.
🔧 خاصیتی به اسم animation-delay داریم که دقیقاً همین کار رو میکنه.
همهی باکسها کلاس box-a دارن.
اگه بخوایم فقط باکس دوم رو هدف بگیریم، باید یه سلکتور خاصتر بنویسیم.
بهجای اضافه کردن کلاس دستی به هر باکس، یه روش بهتر داریم:
کلاس boxes رو به المنت والد که کلاس row داره اضافه میکنیم.
حالا توی CSS مینویسیم:
.boxes .box-a:nth-child(2) {
animation-delay: 0.5s;
}
اگه ذخیره کنیم و رفرش کنیم، میبینیم باکسهای 1، 3 و 4 بلافاصله انیمیت میشن، ولی باکس 2 نیمثانیه صبر میکنه.
حالا همین قانون رو برای باکسهای سوم و چهارم هم تکرار میکنیم:
.boxes .
🎯 حالا قبل از اینکه بریم سراغ وظیفهی انیمیشن چرخشی ستاره، میخوام یه راز کوچیک رو باهات درمیون بذارم…
ما لازم نیست این سه ویژگی مربوط به انیمیشن رو توی سه خط جداگانه بنویسیم.
میتونیم از روش خلاصهنویسی (shorthand) استفاده کنیم و با استفاده از ویژگی animation همهی این مقادیر رو توی یه خط بنویسیم:
animation: fadeBounce 1s forwards;
این خط، اون سه خط قبلی رو خلاصه میکنه.
وقتی ذخیره کنیم و صفحه رو رفرش کنیم، هیچ تغییری در عملکرد نمیبینیم—فقط کدمون تمیزتر شده.
میدونیم که تمرین باعث پیشرفت میشه، پس حالا که با انیمیشنهای CSS روی اون چهار باکس آبی تمرین کردیم، بیاید یه بار دیگه تمرین کنیم و انیمیشن ستارهای که اول درس دیدیم رو بازسازی کنیم.
🌟 توی فایل HTML، کد مربوط به ستاره رو جایگذاری میکنم.
اگه ذخیره کنیم و صفحه رو رفرش کنیم، میبینیم که ستاره ظاهر شده.
نکته: المنت تصویر کلاس star داره.
و توی فایل CSS فقط چند ویژگی براش تعریف شده که میگه عرضش ۲۵٪ از فضای موجود باشه و ارتفاعش متناسب با اون عرض باشه.
حالا که همنظر شدیم، بریم سراغ نوشتن کد انیمیشن برای ستاره.
🧠 توی CSS، با علامت @ و دستور keyframes شروع میکنیم و اسم انیمیشن رو انتخاب میکنیم.
من اسمش رو میذارم slideSpin، ولی تو میتونی هر اسمی که دوست داری بذاری.
@keyframes slideSpin {
/* کد انیمیشن اینجا قرار میگیره */
}
فعلاً ساده شروع میکنیم—فقط میخوایم ستاره بهصورت افقی تا لبهی راست فضای موجود حرکت کنه.
در ۱۰۰٪ از انیمیشن، از ویژگی transform با translateX استفاده میکنیم و محتوا رو ۳۰۰٪ از سمت چپ هل میدیم.
نکته: وقتی از درصد در translate استفاده میکنیم، این درصد نسبت به اندازهی خود المنت هست.
یعنی ۱۰۰٪ برابر با اندازهی کامل خود ستارهست.
چرا ۳۰۰٪؟ چون ستاره دقیقاً یکچهارم فضای موجود رو اشغال کرده.
پس با حرکت به اندازهی سه برابر خودش، لبهی راستش دقیقاً با لبهی راست فضای موجود همراستا میشه.
📦 حالا این انیمیشن ساده رو به کلاس star اعمال میکنیم:
.star {
animation: slideSpin 2s;
}
اگه ذخیره کنیم و رفرش کنیم، میبینیم که انیمیشن اجرا میشه ولی خیلی ناگهانی و خشن برمیگرده به سمت چپ.
برای جلوگیری از این رفتار، از ویژگی animation-fill-mode: forwards استفاده میکنیم تا بعد از اتمام انیمیشن، ستاره در موقعیت نهایی خودش باقی بمونه.
🔁 حالا یادت میاد که اول درس، ستاره فقط یه بار انیمیت نمیشد—مدام تکرار میشد.
برای این کار، از ویژگی animation-iteration-count استفاده میکنیم.
اگه مقدارش رو 2 بذاریم، انیمیشن دو بار اجرا میشه و بعد متوقف میشه.
اگه بخوایم بینهایت بار اجرا بشه، مقدار infinite رو میدیم.
اما الان یه مشکل داریم: ستاره به سمت راست حرکت میکنه و بعد یهدفعه برمیگرده به چپ.
اگه بخوایم انیمیشن بهصورت معکوس اجرا بشه، از ویژگی animation-direction: alternate استفاده میکنیم.
با این کار، ستاره بهنرمی به سمت راست میره و بعد بهنرمی برمیگرده به سمت چپ—و این چرخه بینهایت تکرار میشه.
🔧 حالا که انیمیشن بهصورت نرم به راست و چپ حرکت میکنه، وقتشه حالتهای بیشتری به keyframes اضافه کنیم تا افکت چرخش و تغییر اندازهای که قبلاً دیدیم رو هم اضافه کنیم.
در ۵۰٪ از انیمیشن، میخوایم اندازهی ستاره رو تغییر بدیم:
50% {
transform: translateX(150%) scale(0.5);
}
چون داریم از transform استفاده میکنیم، باید هم translateX و هم scale رو توی یه خط بنویسیم.
۱۵۰٪ یعنی نصف مسیر ۳۰۰٪، پس ستاره در وسط فضای افقی قرار میگیره و اندازهش نصف میشه.
اگه ذخیره کنیم و رفرش کنیم، میبینیم که ستاره در وسط مسیر کوچیک میشه.
🔄 حالا تنها افکتی که کم داریم، چرخش ستارهست.
در ۷۵٪ از انیمیشن، میخوایم ستاره برای لحظهای در وسط بمونه، بچرخه و اندازهش همون نصف باقی بمونه:
75% {
transform: translateX(150%) scale(0.5) rotate(180deg);
}
و چون نمیخوایم بین این حالت و حالت نهایی چرخشی اتفاق بیفته، باید حالت نهایی رو هم به همین شکل تنظیم کنیم:
100% {
transform: translateX(300%) rotate(180deg);
}
حالا اگه ذخیره کنیم و رفرش کنیم، میبینیم که ستاره دقیقاً همون انیمیشنی رو اجرا میکنه که اول درس دیدیم.
🎯 یه راز دیگه: میتونیم همهی ویژگیهای انیمیشن رو توی یه خط خلاصه کنیم:
animation: slideSpin 2s infinite alternate forwards;
با این خط، میتونیم بقیهی خطوط مربوط به انیمیشن رو حذف کنیم.
اگه ذخیره کنیم و رفرش کنیم، همون افکت اجرا میشه ولی با کد کمتر و مرتبتر.
✅ حالا دو مثال این درس رو کامل کردیم: باکسهای آبی و ستاره.
اما قبل از اینکه درس رو تموم کنیم، یه نکتهی خیلی مهم هست:
کد انیمیشن ما توی مرورگر Firefox و نسخههای جدید Internet Explorer عالی کار میکنه.
ولی اگه بخوایم توی Google Chrome، Apple Safari و اکثر گوشیهای هوشمند هم اجرا بشه، باید یه تغییر کوچیک بدیم.
📌 مرحلهی اول: هر جا که با @keyframes انیمیشن تعریف کردیم، اون قانون رو کپی کنیم و نسخهی اولش رو با @-webkit-keyframes بنویسیم.
📌 مرحلهی دوم: هر جا که از ویژگیهای مربوط به انیمیشن استفاده کردیم—چه animation خلاصهشده باشه، چه animation-duration یا animation-iteration-count—اون خط رو کپی کنیم و نسخهی اولش رو با -webkit- بنویسیم.
همین!
اگه این دو مرحله رو برای همهی کدهای انیمیشن انجام بدی، انیمیشنهات روی تقریباً همهی دستگاهها و مرورگرهای مدرن اجرا میشن.
🎬 و با این نکتهی پایانی، این درس رو به پایان میرسونیم.
الان باید با اصول اولیهی انیمیشنهای CSS آشنا شده باشی.
البته ما فقط سطح کار رو خراش دادیم—دنیای انیمیشنها خیلی گستردهتره!
اگه مشتاق یادگیری بیشتر هستی، حتماً توضیحات این درس رو بخون تا منابع و الهامهای بیشتری پیدا کنی.
خوش بگذره و توی درس بعدی میبینمت! 👋✨
کاملاً متوجه شدم، بهرام عزیز! اینم یک جمعبندی آموزشی کامل و منظم از درس انیمیشنهای CSS که هم مفاهیم رو تثبیت میکنه و هم مسیر یادگیری رو روشن نگه میداره:
🎓 جمعبندی درس: آشنایی با انیمیشنهای CSS
در این درس، با اصول پایهای و کاربردی انیمیشن در CSS آشنا شدیم و یاد گرفتیم چطور با استفاده از کد، افکتهای دیداری جذاب بسازیم که بدون نیاز به تعامل کاربر، بهصورت خودکار اجرا بشن.
✅ مفاهیم کلیدی که یاد گرفتیم:
- تفاوت Transition و Animation:
- Transition نیاز به رویداد مثل هاور یا کلیک داره.
- Animation میتونه بهصورت خودکار با بارگذاری صفحه اجرا بشه.
- ساخت انیمیشن با @keyframes:
- تعریف حالتهای مختلف انیمیشن در درصدهای مختلف (۰٪، ۵۰٪، ۱۰۰٪ و…).
- استفاده از ویژگیهای opacity, transform, scale, rotate برای ایجاد افکتهای ترکیبی.
- اعمال انیمیشن به عناصر صفحه:
- استفاده از ویژگیهای animation-name, animation-duration, animation-delay, animation-fill-mode, animation-iteration-count, animation-direction.
- افکت پرش (Bounce) برای باکسها:
- تعریف حالتهای میانی برای ایجاد حرکت بالا و پایین.
- زمانبندی ورود باکسها با nth-child و animation-delay.
- افکت چرخش و تغییر اندازه برای ستاره:
- حرکت افقی با translateX.
- تغییر اندازه با scale.
- چرخش با rotate.
- اجرای بینهایت با infinite و اجرای رفتوبرگشتی با alternate.
- استفاده از shorthand برای تمیز کردن کد:
- ترکیب چند ویژگی در یک خط با animation: name duration iteration direction fill-mode.
- سازگاری با مرورگرهای مختلف:
- افزودن پیشوند -webkit- به قوانین @keyframes و ویژگیهای انیمیشن برای پشتیبانی از Chrome، Safari و موبایلها.
🎯 نتیجه نهایی: با استفاده از CSS Animation میتونیم افکتهای حرفهای و چشمنواز بسازیم که تجربهی کاربر رو ارتقا بدن—بدون نیاز به جاوااسکریپت یا تعامل مستقیم. این درس پایهی خوبی برای ورود به دنیای انیمیشنهای پیچیدهتر و تعاملپذیرتر بود.