امروز : سه شنبه ۳۰ مرداد ۱۳۹۷ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

برای استعلام یا ارسال سفارش اینجا کلیک کنید.

Animation Delay-3 :

تاخیر انیمیشن (Animation Delay) زمانی استفاده می‌شود که ما می‌خواهیم زمان تاخیری برای انیمیشن تعیین کنیم.انیمیشن شروع می‌شود ، سپس ۱ ثانیه بعد شروع به حرکت می‌کند . برای مثال ، ما تاخیر را برای دکمه ” Send Feedback ” به کار بردیم :

1_1yrcLxti8hVX7IFuoEWZZQ چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Delays: یک ثانیه تاخیر

 

 

1_O0K_GB2sDw9fX_qobDsu-g چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Delays: دو ثانیه تاخیر

 

Animation Play State-4:

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

Running : انیمیشن ادامه دارد .

Puesed : انیمیشن متوقف می‌شود .

 

1_G8h2kOLXEKh0JLxgy6hpGw چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Iteration Count-5:

شمارش تعامل(Animation Iteration Count ) برای این است که تعیین کند انیمیشن چند بار تکرار ‌شود .

Infinite : انیمیشن برای همیشه تکرار می‌شود .

‘x’ : انیمیشن مقدار x  را تکرار می‌کند .

Inherit : انیمیشن مقدار را از والد می گیرد و تکرار می‌کند .

 

1_BJ70aO-Sxcyng2j3EtQSsA چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Direction-6 :

Animation Direction برای تعیین  مسیر حرکت انیمیشن است.

Normal : انیمیشن از نقطه ۰ % به نقطه ۱۰۰ % پیشرفت می‌کند .

Reverse:  نقطه شروع انیمیشن به صورت ۱۰۰ % تعیین می‌شود و به سمت نقطه ۰ % حرکت می‌کند .

Alternate :  انیمیشن از ۰ % تا ۱۰۰ % پیشرفت می‌کند , سپس از ۱۰۰ % به ۰ % می‌رسد .

Alternate-reverse: انیمیشن از ۱۰۰ درصد به ۰ درصد صعود می‌کند ; سپس از ۰ درصد به ۱۰۰ درصد صعود می‌کند .

 

1_v6wnl5CgiLQrn-Hfx8Iydw چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Fill Mode-7 :

هنگامی که انیمیشن تمام می‌شود ، style به عناصر در طول حرکت اعمال نمی‌شود . تنها در طول انیمیشن اعمال می‌شود و سپس با کمک این مقدار حذف می‌شود :

Backward: زمانی که انیمیشن پایان می‌یابد ، style در ۰  % به عنصر اعمال می‌شود .

Forward: زمانی که انیمیشن پایان می‌یابد ، style  در ۱۰۰  % به عنصر اعمال می‌شود .

Both: استایل های ابتدایی در آغاز و پایان انیمیشن اعمال می‌شوند .

Initial: این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند .

 

1_5z0FWL2gHBSALCDsdR3w_w چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Will-Change-8 :

با توجه به ویژگی ” Will-Change ” ، ما می‌توانیم از قبل به مرورگر اطلاع دهیم ، و عناصری را که می‌خواهیم در انیمیشن استفاده کنیم ، نشان دهیم . این به ما اجازه می‌دهد تا عناصر را زنده کنیم و ویژگی‌های CSS  را یک جا تغییر دهیم .

بنابراین ، ما می‌توانیم بیش‌ترین اتلاف عملکرد را در طول انیمیشن کاهش دهیم .

button {
      will-change: transform, opacity;
}

 

در اینجا اشاره می‌کنیم که از آن در هر انیمیشن استفاده می‌کنیم حتی در مکان‌های غیر انیمیشنی .

*, *::before, *::after {
      will-change: all
}

 

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

به همین دلیل ، از  Animation Css هر جایی که می‌توانید استفاده کنید : )

برای اطلاعات بیشتر در مورد ویژگی will-change :

https://dev.opera.com/articles/css-will-change-property/

 

The Super 4:

ما می‌توانیم تقریبا هر مقدار

CSS را در keyframes اعمال کنیم . در محبوب‌ترین مرورگرهای امروزی ، شما به راحتی می‌توانید position ، scale ، rotationو opacity values را تعریف کنید .

 

0_mDE-qXCoq5t27Mad چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

 

 کلمات پایانی  :

این ویژگی‌ها اصول اولیه کاری هستند که شما برای اجرای انیمیشن‌های CSS برای وب سایت خود نیاز دارید .زمانی که اصول اولیه را بشناسید ، میتوانید به صورت خلاقانه شروع به کار کنید.

برای آن‌هایی که به یک منبع اضافی با بسیاری از مثال‌ها و کاربردها علاقمند هستند ، یک منبع بزرگ Codepen’s CSS Animations است.

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 276 بار دسته بندی : آموزش css دیدگاه : ۰ تاريخ : ۷ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

مهندسی نرم افزار با ذهنی خلاق و کوشا در حال فعالیت در اوینا وب هستم و در زمینه سئو ، تولید محتوا و طراحی قالب وردپرس مشغول هستم :))

دیدگاه کاربران تعداد دیدگاه : ۰

برچسب ها