animation-direction در CSS: کنترل جهت و ریتم انیمیشن‌ها با مثال‌های کاربردی

ویژگی animation-direction چهار مقدار اصلی دارد که هر کدام رفتار متفاوتی را برای اجرای انیمیشن تعریف می کنند:

 

1. normal (پیش فرض):

   • توضیح: انیمیشن در هر چرخه از ابتدا به انتها اجرا می شود. اگر انیمیشن دارای animation-delay باشد، ابتدا تاخیر اعمال شده و سپس انیمیشن از فریم اول به سمت فریم آخر اجرا می شود.
   • مثال: اگر انیمیشنی دارید که یک عنصر را از چپ به راست جابجا می کند، با normal، هر بار انیمیشن اجرا شود، عنصر از چپ به راست حرکت خواهد کرد.

2. reverse:

   • توضیح: انیمیشن در هر چرخه از انتها به ابتدا اجرا می شود. فریم های کلیدی انیمیشن به صورت معکوس طی می شوند.
   • مثال: اگر انیمیشن شما عنصر را از چپ به راست جابجا می کند، با reverse، هر بار انیمیشن اجرا شود، عنصر از راست به چپ حرکت خواهد کرد.

3. alternate:

   • توضیح: انیمیشن در چرخه های متوالی به صورت رفت و برگشتی اجرا می شود. در چرخه اول، انیمیشن از ابتدا به انتها اجرا می شود. در چرخه دوم، از انتها به ابتدا (معکوس) اجرا می شود. در چرخه سوم دوباره از ابتدا به انتها و به همین ترتیب ادامه می یابد.
   • مثال: عنصری که از چپ به راست حرکت می کند، در چرخه اول از چپ به راست، در چرخه دوم از راست به چپ، و دوباره در چرخه سوم از چپ به راست حرکت خواهد کرد.

4. alternate-reverse:

   • توضیح: این مقدار نیز مانند alternate باعث اجرای رفت و برگشتی می شود، اما با این تفاوت که اولین چرخه به صورت معکوس (از انتها به ابتدا) اجرا می شود. در چرخه دوم، از ابتدا به انتها و به همین ترتیب ادامه می یابد.
   • مثال: عنصری که از چپ به راست حرکت می کند، در چرخه اول از راست به چپ، در چرخه دوم از چپ به راست، و دوباره در چرخه سوم از راست به چپ حرکت خواهد کرد.

نحوه استفاده: شما می توانید این مقادیر را به صورت مستقیم به ویژگی animation-direction اختصاص دهید یا از ویژگی خلاصه نویس animation استفاده کنید.

مثال کلی:

.my-element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* یا reverse, normal, alternate-reverse */
}

در بخش های بعدی، با مثال های عملی، کاربرد هر یک از این مقادیر را بررسی خواهیم کرد.

بیایید با استفاده از مثال های عملی، نحوه عملکرد هر یک از مقادیر animation-direction را مشاهده کنیم. فرض کنید یک انیمیشن ساده داریم که یک باکس را از موقعیت اولیه به سمت راست جابجا می کند.

 

کد HTML پایه:

<div class="animated-box"></div>

تعریف انیمیشن @keyframes:

@keyframes slideRight {
  from {
    transform: translateX(0); /* موقعیت اولیه */
  }
  to {
    transform: translateX(100px); /* 100 پیکسل به سمت راست */
  }
}

حالا مقادیر مختلف animation-direction را به این انیمیشن اعمال می کنیم:

1. normal (پیش فرض):

• کاربرد: انیمیشن همیشه از فریم from به to اجرا می شود.
• کد CSS:

  .animated-box.normal {
    animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* تکرار بی نهایت */
    animation-direction: normal; /* یا این خط را حذف کنید چون پیش فرض است */
    background-color: dodgerblue;
    margin-bottom: 15px; /* برای فاصله */
  }
  

• نتیجه: باکس به طور مداوم از موقعیت اولیه به سمت راست حرکت کرده و سپس بلافاصله به موقعیت اولیه بازمی گردد تا دوباره حرکت را شروع کند.

2. reverse:

• کاربرد: انیمیشن همیشه از فریم to به from اجرا می شود.
• کد CSS:

  .animated-box.reverse {
    animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    background-color: tomato;
    margin-bottom: 15px;
  }
  

• نتیجه: باکس به طور مداوم از موقعیت 100 پیکسل راست به موقعیت اولیه (چپ) حرکت کرده و سپس بلافاصله به موقعیت 100 پیکسل راست بازمی گردد تا دوباره حرکت معکوس را شروع کند.

3. alternate:

• کاربرد: انیمیشن در چرخه های متوالی به صورت رفت و برگشتی اجرا می شود.
• کد CSS:

  .animated-box.alternate {
    animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: mediumseagreen;
    margin-bottom: 15px;
  }
  

• نتیجه:
  • چرخه 1: باکس از چپ به راست حرکت می کند (normal).
  • چرخه 2: باکس از راست به چپ حرکت می کند (reverse).
  • چرخه 3: دوباره از چپ به راست و … این افکت باعث می شود باکس به طور مداوم بین موقعیت اولیه و 100 پیکسل راست در نوسان باشد.

4. alternate-reverse:

• کاربرد: انیمیشن در چرخه های متوالی به صورت رفت و برگشتی اجرا می شود، اما اولین چرخه معکوس است.
• کد CSS:

  .animated-box.alternate-reverse {
    animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    background-color: gold;
    margin-bottom: 15px;
  }
  

• نتیجه:
  • چرخه 1: باکس از راست به چپ حرکت می کند (reverse).
  • چرخه 2: باکس از چپ به راست حرکت می کند (normal).
  • چرخه 3: دوباره از راست به چپ و … این افکت نیز باعث نوسان می شود، اما با شروع از جهت معکوس.

نکته مهم درباره animation-fill-mode: اگر از animation-fill-mode: forwards; همراه با alternate یا alternate-reverse استفاده کنید، ممکن است رفتار نهایی عنصر کمی غیرمنتظره باشد، زیرا حالت نهایی آخرین فریم اجرا شده حفظ می شود. معمولاً برای افکت های رفت و برگشتی، forwards یا both کمتر استفاده می شوند مگر اینکه هدف خاصی داشته باشید.

با درک این مقادیر و مشاهده نتایج آن ها، می توانید به راحتی جهت انیمیشن های خود را کنترل کرده و افکت های حرکتی متنوعی خلق کنید.

ویژگی animation-direction فراتر از صرفاً تعیین جهت حرکت است و می تواند در خلق افکت های خلاقانه تر و ظریف تر به شما کمک کند.

 

1. ایجاد افکت های نوسانی نرم (Smooth Oscillations): مقدار alternate بهترین دوست شما برای ایجاد افکت های نوسانی است. این افکت برای مواردی مانند:

• دکمه های چشمک زن یا متحرک: برای جلب توجه کاربر به یک دکمه مهم.

• عناصر شناور: ایجاد حس شناور بودن یا حرکت آرام یک عنصر.

• افکت های بصری: مانند موج زدن یا ضربان قلب.

  • مثال: یک عنصر که به آرامی به جلو و عقب حرکت می کند.

    @keyframes wave {
      from { transform: translateX(0); }
      to { transform: translateX(20px); }
    }
    
    .wavy-element {
      width: 50px;
      height: 50px;
      background-color: purple;
      animation: wave 3s infinite alternate;
    }
    

2. ترکیب با animation-iteration-count: ترکیب alternate یا alternate-reverse با تعداد تکرار مشخص (غیر از infinite) می تواند نتایج جالبی داشته باشد.

• مثال: یک انیمیشن که دو بار به جلو و دو بار به عقب حرکت می کند.

  .back-and-forth-twice {
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: 4; /* مجموعاً 4 چرخه */
    animation-direction: alternate;
  }
  

  • چرخه 1: جلو (normal)
  • چرخه 2: عقب (reverse)
  • چرخه 3: جلو (normal)
  • چرخه 4: عقب (reverse)

3. کنترل شروع انیمیشن با animation-delay و alternate-reverse: اگر می خواهید انیمیشن شما با یک حرکت معکوس شروع شود، می توانید از ترکیب animation-delay و alternate-reverse استفاده کنید.

• مثال: یک انیمیشن که ابتدا از راست به چپ حرکت می کند، سپس به جلو می رود و این چرخه تکرار می شود.

  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(50px); }
  }
  
  .start-reversed {
    animation-name: slide;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }
  

  این باعث می شود که اولین حرکت از 50px به 0px باشد.

4. تاثیر animation-fill-mode با alternate: اگر از animation-fill-mode: forwards; با alternate استفاده کنید، رفتار عنصر در انتهای انیمیشن (زمانی که iteration-count تمام می شود) به آخرین فریم اجرا شده بستگی دارد. اگر آخرین چرخه به صورت normal اجرا شده باشد، حالت to حفظ می شود و اگر به صورت reverse اجرا شده باشد، حالت from حفظ می شود. این می تواند کمی گیج کننده باشد، بنابراین معمولاً در حالت infinite از forwards استفاده نمی شود.

5. ایجاد افکت های پیچیده تر با steps(): ترکیب animation-direction با steps() می تواند افکت های جالب تری ایجاد کند. برای مثال، یک انیمیشن پله ای که به عقب برمی گردد.

• مثال: یک کاراکتر که به عقب راه می رود.

  @keyframes walkBack {
    from { background-position: -400px 0; } /* آخرین فریم sprite */
    to { background-position: 0 0; } /* اولین فریم sprite */
  }
  
  .character-walking-back {
    width: 50px;
    height: 70px;
    background-image: url('character-sprite.png');
    background-repeat: no-repeat;
    animation: walkBack 1s steps(8) infinite alternate; /* رفت و برگشت در انیمیشن پله ای */
  }
  

  این باعث می شود کاراکتر به صورت پله ای به عقب راه برود و سپس به عقب برگردد.

نکته کلیدی: animation-direction به تنهایی انیمیشن را کنترل نمی کند، بلکه در ترکیب با animation-iteration-count و فریم های کلیدی @keyframes معنا پیدا می کند. درک نحوه تعامل این ویژگی ها با یکدیگر، کلید خلق انیمیشن های پیچیده و دلخواه شماست.

مانند هر ویژگی CSS دیگری، animation-direction نیز مزایا و معایب خاص خود را دارد که درک آن ها به شما کمک می کند تا بهترین استفاده را از آن ببرید.

 

مزایا (Pros):

1. ایجاد افکت های رفت و برگشتی طبیعی: مقدار alternate به طور خودکار افکت های نوسانی یا رفت و برگشتی را ایجاد می کند که برای بسیاری از انیمیشن ها (مانند چشمک زدن، موج زدن، یا حرکت های ساده) بسیار مفید و طبیعی به نظر می رسد.
2. کنترل بهتر بر روی چرخه انیمیشن: با استفاده از reverse یا alternate، می توانید کنترل بیشتری بر روی نحوه تکرار انیمیشن داشته باشید و از تکرارهای ساده و یکنواخت جلوگیری کنید.
3. کاهش نیاز به تعریف فریم های کلیدی اضافی: برای ایجاد افکت رفت و برگشتی، نیازی نیست که شما فریم های کلیدی معکوس را به صورت دستی در @keyframes تعریف کنید؛ alternate این کار را برای شما انجام می دهد.
4. افزایش پویایی و جذابیت: استفاده صحیح از جهت های مختلف انیمیشن می تواند به عناصر وب شما جان ببخشد و آن ها را از حالت ایستا خارج کند.
5. کاربرد در انیمیشن های باینری: برای انیمیشن هایی که حالت های روشن/خاموش یا فعال/غیرفعال دارند، alternate می تواند یک افکت نوسانی جذاب ایجاد کند.

معایب (Cons):

1. پیچیدگی درک رفتار نهایی: اگر animation-iteration-count محدود باشد (مثلاً 3 بار) و از alternate یا alternate-reverse استفاده کنید، درک اینکه عنصر در پایان انیمیشن در چه حالتی خواهد بود، ممکن است کمی پیچیده شود، به خصوص اگر با animation-fill-mode نیز ترکیب شود.
2. تاثیر بر animation-fill-mode: forwards: همانطور که قبلاً اشاره شد، استفاده از forwards با alternate می تواند رفتار غیرمنتظره ای داشته باشد، زیرا حالت نهایی به آخرین فریم اجرا شده بستگی دارد که در چرخه های متوالی تغییر می کند.
3. عدم کنترل بر روی نقاط میانی در reverse: وقتی از reverse استفاده می کنید، انیمیشن دقیقاً از انتهای فریم های کلیدی شما شروع می شود. اگر نیاز به کنترل دقیق تری بر روی نقاط میانی در جهت معکوس دارید، ممکن است نیاز به تعریف @keyframes جداگانه برای حالت معکوس داشته باشید.
4. ممکن است برای همه انیمیشن ها مناسب نباشد: برای انیمیشن هایی که یک روند خطی و یک طرفه دارند (مانند fade-in یا slide-in)، استفاده از alternate ممکن است منطقی نباشد و صرفاً باعث تکرار نامناسب شود.

نکات کلیدی برای استفاده بهینه:

• برای افکت های رفت و برگشتی ساده، alternate بهترین گزینه است.
• اگر می خواهید انیمیشن شما با یک حرکت معکوس شروع شود، از alternate-reverse استفاده کنید.
• هنگام استفاده از مقادیر alternate و alternate-reverse، به نحوه تعامل آن ها با animation-iteration-count و animation-fill-mode توجه داشته باشید.
• همیشه انیمیشن های خود را در مرورگرهای مختلف تست کنید تا از رفتار صحیح آن ها اطمینان حاصل کنید.

1. چه تفاوتی بین alternate و alternate-reverse وجود دارد؟ هر دو مقدار باعث اجرای رفت و برگشتی انیمیشن می شوند. تفاوت اصلی در چرخه اول است: alternate با اجرای عادی (از ابتدا به انتها) شروع می کند، در حالی که alternate-reverse با اجرای معکوس (از انتها به ابتدا) شروع می کند.

2. آیا animation-direction روی انیمیشن های با animation-iteration-count: 1 تاثیر می گذارد؟ بله. اگر animation-iteration-count روی 1 باشد و animation-direction روی alternate یا alternate-reverse تنظیم شده باشد، انیمیشن فقط یک بار اجرا می شود (به صورت عادی یا معکوس، بسته به مقدار).

3. چگونه می توانم انیمیشنی بسازم که فقط یک بار به جلو و یک بار به عقب حرکت کند؟ با تنظیم animation-iteration-count: 2; و animation-direction: alternate;. چرخه اول به صورت عادی و چرخه دوم به صورت معکوس اجرا می شود.

4. آیا می توانم جهت انیمیشن را با JavaScript تغییر دهم؟ بله، شما می توانید مستقیماً ویژگی animationDirection یک عنصر را با JavaScript تغییر دهید.

5. چه زمانی باید از normal استفاده کنم؟ وقتی که می خواهید انیمیشن شما همیشه به یک شکل و در یک جهت مشخص اجرا شود، مانند یک انیمیشن fade-in یا یک چرخش مداوم در یک جهت.

6. چگونه animation-direction با animation-fill-mode: forwards تعامل دارد؟ اگر animation-iteration-count برابر با infinite نباشد، forwards آخرین فریم اجرا شده را حفظ می کند. با alternate، آخرین فریم اجرا شده می تواند حالت to یا from باشد. این می تواند منجر به حفظ حالت from شود اگر آخرین چرخه معکوس بوده باشد.

7. آیا reverse باعث می شود انیمیشن از حالت نهایی به حالت اولیه برگردد؟ بله، reverse باعث می شود که فریم های کلیدی به صورت معکوس طی شوند، بنابراین اگر انیمیشن شما از A به B حرکت می کند، با reverse از B به A حرکت خواهد کرد.

در پایان این بررسی جامع، امیدواریم که اکنون درک کاملی از ویژگی animation-direction در CSS و نقش آن در کنترل جهت اجرای انیمیشن ها پیدا کرده باشید. این ویژگی، ابزاری قدرتمند است که به شما اجازه می دهد تا با افزودن پویایی و ظرافت به حرکات وب سایت خود، تجربه کاربری را به طور قابل توجهی بهبود بخشید.

 

با مقادیری مانند normal (که رفتار پیش فرض است)، reverse (برای اجرای معکوس)، alternate (برای افکت های رفت و برگشتی جذاب) و alternate-reverse (برای شروع با حرکت معکوس)، شما کنترل کاملی بر چرخه حیات انیمیشن های خود دارید. ما دیدیم که چگونه این مقادیر می توانند در ترکیب با تعداد تکرار (animation-iteration-count) و فریم های کلیدی (@keyframes)، افکت های بصری متنوعی را خلق کنند؛ از نوسانات نرم گرفته تا انیمیشن های پله ای که به عقب برمی گردند.

به یاد داشته باشید که استفاده صحیح از animation-direction می تواند تفاوت بزرگی در حس و حال کلی یک انیمیشن ایجاد کند. انتخاب جهت مناسب می تواند به طبیعی تر شدن حرکات، جلب توجه کاربر به شیوه ای مؤثرتر و ایجاد یک جریان بصری دلپذیر کمک کند.

اکنون شما آماده اید تا با اطمینان بیشتری از این ویژگی استفاده کنید و انیمیشن هایی بسازید که نه تنها زیبا، بلکه هوشمندانه و هدفمند هستند. با آزمایش مقادیر مختلف و ترکیب آن ها با سایر ویژگی های انیمیشن CSS، می توانید وب سایت خود را به سطحی جدید از جذابیت بصری برسانید. 😃