آموزش CSS ؛ استفاده از ()Steps در ساخت انیمیشن‌ CSS

تاریخ بروز رسانی: ۲۲ آبان, ۱۴۰۱

راهنمای مطالعه

ابزارهای مختلفی ساخته شده‌اند تا به ما کمک کنند که کارهای همیشگی و روزمره‌ را بهتر و بیشتر انجام دهیم، اما یادگرفتن آن‌ها ممکن است کمی سخت باشد. اگر شما هم هنگام استفاده از ()steps‌ در ساخت انیمیشن‌ CSS ، گیج‌ و سردرگم شده‌اید در ادامه همراه ما باشید!

معرفی steps‌

«steps» در لغت به معنی «قدم زدن» یا «قدم» است و در انیمیشن، یک عملکرد کنترل زمان است که به ما اجازه می‌دهد که Animation را قطع کنیم یا به‌جای اینکه مجبور باشیم سگمنت‌ها را به ترتیب و یکی‌یکی جلو برویم، بتوانیم در سگمنت‌ها، transition ایجاد کنیم. این عملکرد نیازمند دو پارامتر است، اولین پارامتر تعداد مثبت step‌ ها را مشخص می‌کند که می‌خواهیم انیمیشن ما داشته باشد.

steps(<number_of_steps>, <direction>)

پارامتر دوم نقطه‌ای را مشخص می‌کند که دستور تعیین‌شده در @keyframes، قرار است در آن نقطه اجرا شود. این عدد اختیاری است و اگر ما چیزی تعیین نکنیم، به‌صورت پیش‌فرض روی «end» می‌ماند. تعیین مسیر «start»، حرکتی ممتد به سمت چپ را تعیین می‌کند و step اول به‌محض شروع انیمیشن، کامل می‌شود و بلافاصله به انتهای step اول می‌پرد و تا پایان زمان این step، در همان‌جا می‌ماند؛ اما تعیین مسیر «end» حرکت ممتد به سمت راست را مشخص می‌کند و تا پایان زمان step اول، حرکت را متوقف می‌کند. برای یک انیمیشن، هر یک از این گزینه‌ها، اساساً، عنصر را از جهت متفاوتی حرکت می‌دهد و موقعیت متفاوتی ایجاد می‌کند.

تصویر زیر این عملکرد را نشان می‌دهد:

تأثیر حالت Fill و تعداد تکرارها

قبل از اینکه شروع کنیم، مهم است که بدانیم، هر حالت متفاوت Fill مانند «forward» یا «infinite» و تعداد تکرارها، چه تأثیری روی ()steps خواهد گذاشت. اگر ما دو ماشین با طول زمان انیمیشن و تعداد ()step‌s یکسان داشته باشیم، اما برای یکی تعیین کنیم که infinitely ادامه دهد، درحالی‌که دومی fills forward کند، نقطه پایان این دو ماشین بسیار متفاوت دیده خواهد شد، باوجودی که هر دو از یک نقطه مساوی روی محور y شروع می‌کنند.

مقاله مرتبط: با Animista، به‌راحتی انیمیشن CSS بسازید

استفاده از دستور forwards باعث می‌شود تا عنصر متحرک پس از پایان زمان انیمیشن، استایل‌ها را از آخرین @keyframes ادامه دهد و در همان حالت باقی بماند. ترکیب forwards و steps() در انیمیشن، حرکت را این‌گونه جلوه خواهد داد که حالت سکون اولیه، در جمع کل step‌ها منظور نمی‌شود، درحالی‌که باوجود «end»، باید منظور شود یا به عبارتی، ماشین علاوه بر ()step‌s از قبل تعیین شده، یک step اضافه انجام می‌دهد!

این توضیحات شاید به نظر گیج‌کننده باشد؛ اما در دموهای پائین توضیحات بیشتری خواهیم داد. نکته مهم این است که توجه داشته باشید که چگونه این تغییرات روی اهداف شما و تعداد step‌ها تأثیر می‌گذارد. در تصویر زیر، نمونه‌ای از ماشین‌ «infinite» در مقایسه با «forward» ارائه‌شده است:

.contain-car {
   animation: drive 4s steps(4, end) infinite;
}
 
.contain-car-2 {
  animation: drive 4s steps(4, end) forwards;
}

حالا به کدهای بیشتری نگاه می‌کنیم و سعی می‌کنیم که این ترفندها را یاد بگیریم.

دموهای steps‌

اینجا می‌توانید دموها را ببینید که شامل موارد زیر است:

ساخت انیمیشن ساعت با استفاده از CSS
ساخت انیمیشن ماشین با استفاده CSS
ساخت انیمیشن رد پای خرس با استفاده از CSS
ساخت انیمیشن دایره فرآیند تکمیل با استفاده از CSS

ساعت CSS

ساعت، برای نشان دادن ()steps گزینه مناسبی است. ما می‌خواهیم که عقربه‌های ساعت بچرخند، اما نه به‌صورت آرام گرد، بلکه استفاده از ()steps‌، به ما اجازه می‌دهد که حرکتی شبیه چرخش عقربه‌های ساعت واقعی باحالت تیک‌تاک کپی کنیم. وقتی از ()steps‌ استفاده می‌کنیم، کمی ریاضیات لازم است اما سخت نیست! ما می‌خواهیم که عقربه دوم پس از ۶۰ تیک‌تاک، ۳۶۰ درجه بچرخد و حرکت را در ۶۰ ثانیه تکمیل کند!

.second {
  animation: tick-tock 60s steps(60, end) infinite;
}
 
@keyframes tick-tock {
  to {
    transform: rotate(360deg);
  }
}

پس حرکت ساعت یک steps در هر ثانیه است. برای عقربه دقیقه، می‌توانیم از همان @keyframes استفاده کنیم اما زمان را باید تغییر دهیم. ۶۰ را در ۶۰ ضرب می‌کنیم تا زمان جدید به دست آید. عقربه در هر ۶۰ ثانیه، ۶۰ بار حرکت خواهد کرد تا ۳۶۰ درجه کامل بچرخد. همین!

.minute {
  animation: tick-tock 3600s steps(60, end) infinite;
}

ساخت ماشین‌ متحرک با استفاده از CSS

این ماشین‌ها تفاوت استفاده از «end» و «start» در steps‌ را نشان می‌دهند. «start» باعث می‌شود که ماشین بلافاصله حرکت کند و تا پایان زمان یک step، ادامه دهد. این‌گونه به نظر خواهد آمد که ماشین «start» نسبت به ماشین «end»، خیلی سمت راست‌تر قرارگرفته، اما اگر یک تأخیر به ماشین «end» اضافه کنید، خواهید دید که هر دو ماشین از یک نقطه روی محور y شروع می‌کنند.

مقاله مرتبط: انیمیشن‌سازی گرادینت SVG

«end» اساساً، باعث می‌شود که انیمیشن زمان تعیین شده برای یک steps را کامل کند، قبل از اینکه حرکت شروع شود. وقتی ماشین اول حرکت را شروع می‌کند، ماشین دوم در step دوم خود است پس ماشین‌ها هیچ شانسی برای موازی شدن ندارند! خط‌های سفید در دمو نقاط آغاز و پایان انیمیشن را نشان می‌دهند.

.contain-car {
  animation: drive 4s steps(4, end) infinite;
}
 
.contain-car-2 {
  animation: drive 4s steps(4, start) infinite;
}
 
@keyframes drive {
  to {
    transform: translateX(640px);
  }
}

ساخت انیمیشن جای پای خرس با استفاده از CSS

راه دیگر برای درک بهتر steps‌ این است که معنی کلمه «steps» را جدی بگیریم و «قدم واقعی» تولید کنیم. برای این مثال، ما از قدم‌های خرس استفاده می‌کنیم. این دمو از یک عکس که شامل ۶ جای پای خرس است، استفاده می‌کند. عکس شامل یک <div> است که ما می‌خواهیم با steps حرکتش دهیم تا جای پای خرس نمایان شود، درست مثل جای پای واقعی خرس که روی زمین می‌ماند.

بدون استفاده از steps برای این تصویر، <div> در یک حرکت موزون به سمت راست حرکت می‌کند که چیزی نیست که ما به دنبالش هستیم. ما می‌خواهیم هر جای پا به‌صورت کامل و یکجا ظاهر شود.

همان‌طوری که گفته شد، ۶ جای پا وجود دارد. ما باید <div> را طوری متحرک‌سازی کنیم تا طول کامل یک تصویر را حرکت داده باشیم (۶۷۵ پیکسل)، درحالی‌که جای پاهای خرس یکی‌یکی و کامل ظاهر شود.

.cover {
  animation: walk 7s steps(7, end) infinite;
}
 
@keyframes walk {
  to {
    transform: translateX(675px);
  }
}

<div> در ۷ ثانیه و در ۷ steps، ۶۷۵ پیکسل به سمت راست حرکت می‌کند؛ بنابراین هر steps حدود ۹۶ پیکسل خواهد بود. «end» در اینجا یعنی اینکه انیمیشن ما در حالت اولیه خواهند ماند و همه‌جاهای پا را پنهان خواهد کرد تا steps یک ثانیه اول، کامل شده باشد.

ساخت انیمیشن دایره تکمیل فرآیند با استفاده از CSS

در این دمو، ما از «استارت» به همراه تغییر مات بودن استفاده می‌کنیم. وقتی ما مات بودن تصویر متحرک را تغییر می‌دهیم، می‌توانیم از ()steps‌ استفاده کنیم تا آن را در مراحل کاملاً دقیق اجرا کنیم. استفاده از «استارت»، بلافاصله درصدی از رنگ را نمایان می‌کند حتی اگر ماتی اولیه روی «۰» بوده باشد. انتخاب «end» در این مثال، یک دایره نامرئی در ابتدا به ما می‌دهد.

تغییر در ۵ steps و در ۵ ثانیه اتفاق می‌افتد، بنابراین هر step معادل یک ثانیه است.

.circle {
  animation: fill 5s steps(5, start) forwards;
}
 
@keyframes fill {
  to {
    opacity: 1;
  }
}

درصد تکمیل هم با ()steps حرکت خواهد کرد:

.percentage {
  animation: load 4s steps(4, end) forwards;
}
 
@keyframes load {
  to {
    transform: translateY(-380px);
  }
}

همه درصدها درهمان <div> ذخیره‌شده‌اند که ما ۳۸۰ پیکسل بالا می‌بریم. «۲۰%» اولیه از همان ابتدا در دایره وجود دارد پس ما باید <div> را طوری حرکت دهیم تا ۴۰%، ۶۰%، ۸۰% و ۱۰۰%، در ۴ steps‌، نمایان شوند.

استفاده از «forward» در این دمو، نسبت به «infinite» در دموهای قبلی، تأثیر متفاوتی روی تعداد step ها می‌گذارد. اگر این دمو را به «infinite» تغییر دهیم، «۱۰۰%» را به‌طور کامل از دست خواهیم داد، زیرا «forward» به تصویر دستور می‌دهد که علاوه بر step‌ های تعیین شده اولیه، یک step اضافه داشته باشد.

کلام آخر

یادگرفتن عملکرد کنترل زمان ()steps‌، می‌تواند خیلی پیچیده باشد، اما وقتی درکش کنید، خیلی به‌دردبخور و کارآمد است. CSS به ما اجازه می‌دهد که انیمیشن را به مراحل کاملاً مشخصی تقسیم کنیم یا سرعت کار را برای ایجاد حرکت‌های روان و موزون، زیاد کنیم.

در پایان، امیدواریم این دموها به شما انگیزه بدهد تا بیشتر و بهتر، در انیمیشن CSS خود، از ()steps‌ استفاده کنید.