💗 سلامی به جنب‌وجوش انیمیشن‌های تحت وب و درودی با طعم CSS3 تقدیم به شما همراهان ارجمند 💗
⭕ آیا با دستورات Animation در CSS3 آشنایی دارید؟🎃
⭕ آیا می‌دانید به لطف انیمیشن‌ها، المان‌های HTML می‌توانند حرکات موزون انجام دهند❓❕
⭕ آیا دوست دارید برای سایت خود جعبه‌های چشمک‌زن درست کنید؟👀
⭕ آیا علاقه‌مند هستید یک توپ فوتبال داشته باشید که در سایت شما مدام به این طرف و آن طرف برود❓❕
در این آموزش که قسمت چهارم از آموزش CSS3 است، قصد داریم تمامی سوالات بالا را به‌طور دقیق بررسی نماییم. این شما و این هم:
🔰 فیلم آموزش ساخت انیمیشن (Animation) در CSS3 🔰
🔰 آموزش ویژگی انیمیشن در CSS به روایت متن و تصویر 🔰
تعریف ویژگی انیمیشن در CSS
با به‌کارگیری ویژگی Animation در CSS قادر هستیم طبق زمان‌بندی خاصی، استایل‌های دلخواهی روی المان‌های HTML اعمال نماییم.
افراد تازه‌کار معمولاً از افزودن امکانات متحرک، ترس دارند. آن‌ها بر این باورند که برای ساخت تصاویر و المان‌های متحرک، ملزم به استفاده از عکس‌هایی با فرمت GIF هستند و به‌جهت حجم بالای این تصاویر و سنگین شدن صفحات وب، این مورد را فاکتور می‌گیرند.
اما شما در این آموزش خواهید دید که صرفاً با نوشتن چند خط کد CSS می‌توانید جعبه‌ها و تصاویر متحرک بسازید و کاربران وب‌سایت‌تان را متحیر کنید.
آموزش انیمیشن‌ها در CSS
در این بخش قصد داریم با استفاده از کدهای CSS، جعبه‌ای رنگارنگ و متحرک طراحی نماییم.
برای استفاده از انیمیشن‌ها در CSS ابتدا لازم است با استفاده از کلیدواژه‌ی keyframes@ نام انیمیشن خود را تعریف نماییم. این اسم می‌تواند هرچیزی باشد (ترجیحاً مرتبط با اقدامات انیمیشن). همان‌طور که در کدهای زیر مشخص است، نام انیمیشن خود را Color انتخاب کرده‌ایم.
@keyframes color {
}
حال لازم است تعیین کنیم که انیمیشن ما باید روی چه تگی اعمال شود. در اینجا یک تگ <div> ایجاد کردیم که نشان‌دهنده‌ی یک باکس با رنگ (پیش‌فرض) نارنجی می‌باشد.
اکنون باید با استفاده از خاصیت animation-name، این المان را به انیمیشن Color متصل نماییم.
درواقع با این کار، هر دستوری که درون keyframes color@ درج شود، مستقیماً روی تگ <div> ما اعمال خواهد گردید.
Div {
Width: 100px;
Height: 100px;
Position: absolute;
Background-color: orange;
Animation-name: color;
Animation-duration: 3s;
Animation-iteration-count: infinite;
}
در ادامه نیز با استفاده از خاصیت animation-duration در تگ <div> (یا هر المانی که به انیمیشن خود وصل کرده‌ایم) مشخص می‌کنیم، مدت زمان انیمیشن ما چند ثانیه طول بکشد. که ما در اینجا (مطابق با کدهای بالا) مقدار 3 ثانیه را وارد نمودیم.
تکرار انیمیشن در CSS
با استفاده از خاصیت animation-iteration-count نیز می‌توان تعداد تکرار انیمیشن را تعیین نمود. به عنوان مثال اگر قصد داریم، انیمیشن ما 5 مرتبه (پشت‌سرهم) تکرار شود، عدد 5 را وارد می کنیم و درصورتی‌که بخواهیم بی‌نهایت بار تکرار شود، از مقدار Infinite بهره می‌گیریم.
درحال حاضر در قسمت keyframes@ باید مشخص کنیم، در طول مدت 3 ثانیه، چه اتفاقاتی روی تگ <div> رخ دهد. در این بخش قادر هستیم 3 ثانیه‌ای که در تگ <div> تعریف کردیم را به بخش‌های جداگانه تقسیم کنیم. این بخش‌بندی معمولاً به روش درصدی انجام می‌شود.
به‌عبارتی ساده‌تر اگر بخواهیم مدت زمان انیمیشن (از ابتدا تا انتها) را به 4 قسمت تقسیم کنیم، سهم هر بخش 25% خواهد شد.
در این پروژه هدف ما این است که جعبه‌ی ما که به‌صورت پیش‌فرض نارنجی است، طیِ 3 ثانیه به 4 رنگ متفاوت تغییر کند و این چرخه‌ی رنگ تا آخر ادامه یابد. در نتیجه با قرار دادن کدهای زیر می‌توان یک جعبه‌ی چشمک‌زن را در صفحه‌ی وب نمایش داد.
@keyframes color {
0% {
Background-color:orange;
}
25% {
Background-color:yellow;
}
50% {
Background-color:pink;
}
75% {
Background-color:green;
}
100% {
Background-color:orange;
}
}
در کد بالا، 0% به رنگ پیش‌فرض جعبه اشاره دارد و 100% نیز به رنگ (استایل) نهایی باکس را مشخص می‌کند.
ترکیب Transition و Animation در CSS
باتوجه به آموزش ویژگی Transition در CSS که در قسمت قبل ارائه گردید، می‌توانیم همان موارد را داخل کدهای انیمیشن نیز استفاده نماییم. درواقع چون به لطف دستورات animation توانستیم بازه‌ی زمانی انیمیشن را جداسازی کنیم، بنابراین قادر هستیم روی هر بخش، استایل‌های دل‌خواه خود را اعمال نماییم. مثلاً با بهره‌گیری از دستور ()rotate تعریف می‌کنیم در قسمت سوم (زمان اجرای انیمیشن) که رنگ جعبه صورتی می‌باشد، جعبه سه مرتبه به دورِ خود بچرخد و سپس به رنگ سبز تبدیل شود.
درادامه برای درک هرچه‌بهتر این مبحث، 3 سناریو در زیر مطرح شده که سعی کنید بدون توجه به پاسخ آن‌ها، جواب را در ذهن خود در قالب کدهای css اجرا نمایید. درنهایت با پاسخ‌های زیر مقایسه نمایید. با این روش به‌طور عمیق، مطلب را درک خواهید کرد.
پرسش1: اگر خواستیم جعبه در ابتدا به سمت راست حرکت کند و در بازه‌ی زمانی دوم به جای خود بازگردد، تکلیف چیست❓❕
پاسخ: در بخش 25% خاصیت left را برابر 200px قرار می‌دهیم و در بخش 50% مقدار left را برابر 0px قرار خواهیم داد.
پرسش2: اگر بخواهیم در اواسط انیمیشن، سایز جعبه دو برابر شود و پس از آن به حالت پیش‌فرض برگردد، تکلیف چیست❓❕
پاسخ: در بخش 75% خاصیت width را دوبرابر حالت پیش‌فرض قرار می‌دهیم و در قسمت 100% مجدداً مقدار قبلی را درج خواهیم نمود.
پرسش3: اگر بخواهیم در اواسط انیمیشن، جعبه به‌طور کلی از صحنه‌ی روزگار محو شود و در بخش قسمت بعد، مجدداً ظاهر شود، تکلیف چیست❓❕
پاسخ: برای این کار دو راه وجود دارد؛ اول این‌که می‌توان در بخش 50% رنگ پس‌زمنیه‌ی جعبه را برابر با رنگ پس‌زمینه‌ی کل صفحه قرار دهید. اما راه دوم که اصولی تر هم هست، می‌توانیم خاصیت display را برابر با none قرار دهیم. با این کار، در بازه‌ی زمانیِ 50% تا 75% جعبه‌ی ما ناپدید خواهد شد.
به همین ترتیب می‌توانید فقط با کدهای ساده‌ی CSS، انیمیشن‌های جذاب و خارق‌العاده بسازید و از این شهربازیِ کدها، لذت ببرید.
آموزش ساخت توپ متحرک با ویژگی انیمیشن در CSS
تصور کنید قصد داریم در وب‌سایت شخصیِ خود یک توپ داشته باشیم که مدام به این طرف و آن طرف می‌رود.
سوال: به نظر شما با به‌کارگیری مطالبی که تاکنون آموخته‌ایم قادر به پیاده‌سازی همچین امکانی هستیم؟؟؟
جواب: معلومه که آره❕❕❕
فقط کافیست به‌جای جعبه‌ای که در قسمت قبل با استفاده از تگ <div> ساختیم، عکسِ یک توپ را قرار دهیم و تمامی استایل‌های انیمیشن را روی آن اعمال نماییم.
در ادامه نیز کدهای زیر را در Text Editor خود وارد می‌کنیم:
@keyframes color {
0% {
Left: 150px;
Top:0px;
}
25% {
top: 150px;
left: 0px;
}
50% {
right: 150px;
top: 0px;
}
75% {
Background-color: green;
left: 0px;
bottom: 150px;
}
100% {
}
}
بدیهی است برای این‌که کدهای بالا به‌درستی اجرا شوند، نیاز است تا همانند قبل، حتماً خاصیت animation-name برای تگ <img> تعریف شود. در غیر این صورت، استایل‌های ما روی تصویر مورد نظر اجرا نخواهد شد.
ضمناً برای مشاهده‌ی انیمیشن‌های بی‌نظیر و باورنکردنی می‌توانید به سایت Codepen.io مراجعه نمایید (عبارت CSS Animation را جستجو کنید).
ثبت ديدگاه