animation fill mode در سی اس اس

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

 animation fill mode در سی اس اس

 

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

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

forwards

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

backwards

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

both

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

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

 

مثال زیر مربوط به animation fill mode در سی اس اس است.در این مثال اگر نشانگر موس را بر روی مکعب قرار دهیم مکعب با حالت Forward حرکت میکند و اگر تیک کنار مکعب را انتخاب کنیم رنگ مکعب تغییر کرده و با حالت backwords حرکت میکند.


See the Pen
0

کدفرند

کدفرند محلی برای کسانی است که علاقه به برنامه‌ نویسی راه اندازی کسب و کار اینترنتی شخصی دارند،ما در این جا دور هم جمع شده ایم تا از جدیدترین مباحث برنامه نویسی و تازه های فناوری اطلاعات بنویسیم.

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است