animation-fill-mode

با استفاده از ویژگی animation-fill-mode می توان برای یک انیمیشن تعریف کرد که در زمانی که اجرا نمی شود چه مقادیری را بر روی عنصر اعمال کند. به بیان واضح تر در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند.

بصورت پیشفرض انیمیشن بین زمانی که برای یک عنصر تعریف می شود و زمانی که اجرا می شود ( مدت زمان animation-delay ) تاثیری بر روی مقادیر ویژگی های عنصر مربوطه نخواهد گذاشت. و همینطور زمانی که انیمیشن به اتمام می رسد نیز مقادیری را تغییر نخواهد داد. اینچنین رفتارهایی می توانند بوسیله ویژگی animation-fill-mode تغییر کنند.

مقدار پیشفرض این ویژگی none می باشد که باعث رفتارهای گفته شده توسط انیمیشن می شود.

forwards

اولین مقداری که با هم بررسی خواهیم کرد مقدار forwards است. این مقدار باعث می شود زمانی که انیمیشن به اتمام می رسد مقادیر آخرین فریم کلیدی بر روی عنصر دارای انیمیشن اعمال شده و ثابت بماند. در مثال زیر مقادیر فریم نهایی پس زمینه آبی و چرخش 90 درجه می باشد.

  animation-fill-mode: forwards;

 

See the Pen animation-fill-mode: forwards by Mojtaba Seyedi (@seyedi) on CodePen.

 

همانطور که مشاهده می کنید زمانی که انیمیشن به اتمام می رسد عنصری که مقدار none دارد یک پرش به ابتدای کار دارد که این رفتار صحنه جالبی در بسیاری از انیمیشن ها بوجود نمی آورد. اما وقتی عنصر انیمیشنی با مقدار forwards دارد تغییراتش در همان فریم آخر ثابت می مانند که باعث می شود آن پرش به اول کار از بین برود.

backwards

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

  animation-fill-mode: backwards;

 

See the Pen animation-fill-mode: backwards by Mojtaba Seyedi (@seyedi) on CodePen.

 

both

این مقدار تاثیر هر دو حالت backwards و forwards را بر روی انیمیشن دارد.

  animation-fill-mode: both;

 

See the Pen animation-fill-mode: both by Mojtaba Seyedi (@seyedi) on CodePen.

 

نکته مهم این که باید توجه داشته باشید زمانی که بوسیله ویژگی animation-direction انیمیشن معکوس اجرا می شود برای حالت backwards فریم کلیدی اولیه, فریم کلیدی آخر است و برای حالت forwards فریم کلیدی نهایی, فریم کلیدی اول است.

مثل دیگر ویژگی های انیمیشن این ویژگی نیز می تواند به صورت لیست جدا شده بوسیله ویرگول برای انیمیشن های مختلف بر روی یک عنصر تنظیم شود. وقتی از این روش برای تعیین تکرار چند انیمیشن بصورت یکجا استفاده می کنید باید توجه داشته باشید که ترتیب آن ها برای تعیین ویژگی های دیگر انیمیشن از قبیل animation-delay, animation-duration, animation-name و غیره, اهمیت خواهد داشت.

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
  animation-timing-function: ease-out, ease, linear;
  animation-fill-mode: both, forwards, none;
}

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

پشتیبانی مرورگر ها