فکر می کنید از CSS فقط برای ایجاد انیمیشن استفاده می شود؟ در واقع، اینطور است، اما در کنار آن، می توانید از CSS نیز برای کنترل سرعت، مدت زمان، جهت، زمان شروع و غیره استفاده کنید.
مهم نیست که می خواهید انیمیشن شما در جهت بالا یا پایین حرکت کند، ویژگی CSS animation-direction در توسعه وب به شما امکان می دهد به اهداف خود برسید.
آیا در این زمینه تازه کار هستید؟ نیازی به ناراحتی نیست! در این وبلاگ با ویژگی های انیمیشن CSS آشنا خواهید شد.
اکنون، بدون هیچ مقدمه دیگری، بیایید بفهمیم که انیمیشن CSS در کنار کاربرد آن چیست.
ویژگی CSS animation-direction چیست؟
ویژگی جهت انیمیشن CSS همه چیز در مورد جهت انیمیشن است. هنگامی که این ویژگی را تنظیم کردید، می توانید به راحتی چرخه انیمیشن را به عقب، جلو یا در جهت دیگری تنظیم کنید.
حالا بیایید نگاهی به جهت های مختلف انیمیشن بیندازیم:
- animation-direction: normal;
- animation-direction: reverse;
- animation-direction: alternate-reverse;
- animation-direction: alternate;
برای کمک بیشتر به شما، نحو ویژگی animation-direction را به اشتراک گذاشته ام. امیدواریم این نحو به شما کمک کند مانند یک حرفه ای انیمیشن بسازید.
/* انیمیشن Single ویژگی انیمیشن CSS */
- animation-direction: normal;
- animation-direction: reverse;
- animation-direction: alternate;
- animation-direction: alternate-reverse;
/* انیمیشن های متعدد ویژگی انیمیشن CSS */
- animation-direction: normal, reverse;
- animation-direction: alternate, reverse, normal;
/* مقادیر جهانی ویژگی انیمیشن CSS */
- animation-direction: inherit;
- animation-direction: initial;
- animation-direction: revert;
- animation-direction: unset;
اکنون که ویژگی های مختلف انیمیشن CSS را می شناسید، زمان آن رسیده است که مقادیر ویژگی های انیمیشن CSS را درک کنید.
مقادیر ویژگی CSS Animation
طبیعی
اگر از این ویژگی استفاده کنید، انیمیشن به جلو پخش می شود. به این معنی که برای هر چرخه انیمیشن، انیمیشن به حالت شروع بازنشانی میشود و دوباره شروع میشود.
مقدار – “Normal” اساساً مقدار پیش فرض ویژگی animation-direction در CSS است. بنابراین اگر این ویژگی را تنظیم نکنید، به طور پیش فرض، به جلو پخش می شود.
معکوس
انیمیشن معکوس همه چیز در مورد انیمیشن هایی است که در هر چرخه در جهت معکوس انجام می شود. در این سبک مراحل انیمیشن و عملکردهای زمان بندی به صورت عقب انجام می شود.
به عنوان مثال، یک تابع زمان بندی آسان به آسانی تبدیل می شود.
متناوب
انیمیشن جایگزین در هر چرخه جهت را معکوس می کند و اولین تکرار در جهت جلو است . شمارش برای تعیین فرد یا زوج بودن یک چرخه از یک است.
متناوب- معکوس
متناوب- معکوس جهت هر چرخه را معکوس می کند، با تکرار اول به عقب پخش می شود. شمارش برای تعیین زوج یا فرد بودن یک چرخه است که از یک شروع می شود.
خلاصه CSS برای کارگردانی انیمیشن
از دانستن این موضوع شگفت زده خواهید شد که میتوانید ویژگیهای مختلف انیمیشن از جمله جهت انیمیشن را نیز تنظیم کنید که با استفاده از ویژگی کوتاهنویسی انیمیشن CSS قابل انجام است.
ویژگی کوتاهنویسی انیمیشن CSS، انیمیشن بین سبکها را اعمال میکند. این یک روش مختصر برای تنظیم تمام ویژگی های انیمیشن مانند انیمیشن-نام، انیمیشن-مدت، انیمیشن-زمان-عملکرد، انیمیشن-تاخیر، انیمیشن-تکرار-تعداد، انیمیشن-جهت، انیمیشن-پر-حالت، و انیمیشن-بازی- است. حالت.
مشکلات متداول انیمیشن CSS
خواه انیمیشن شما آنطور که میخواهید کار نمیکند یا اصلاً کار نمیکند، در اینجا چند دلیل برای مشکلات و نحوه حل آنها آورده شده است:
قانون @keyframes وجود ندارد
در انیمیشن های CSS، قانون keyframes@ نحوه ظاهر انیمیشن را مشخص می کند. به طور خاص تر، مشخص می کند که کدام سبک عناصر و چه زمانی تغییر می کند. بدون این قانون، عنصر شما هیچ انیمیشنی برای استفاده نخواهد داشت. بنابراین دفعه بعد، بررسی کنید که آیا قانون @keyframes شما وجود دارد و آیا نام آن با نام انیمیشن عنصر مورد نظر مطابقت دارد یا خیر.
مدت زمان انیمیشن تنظیم نشده است
فرض کنید یک قاعده فریم های کلیدی را به عنصر اختصاص داده اید، اما اگر مدت زمان انیمیشن را تنظیم نکرده باشید، باز هم پخش نمی شود. به طور پیش فرض، صفر ثانیه چرخه انیمیشن CSS است.
برای نادیده گرفتن این چرخه، باید یک قانون مدت زمان انیمیشن را با مقدار ثانیه در عنصر مورد نظر خود بگنجانید، درست مانند بلوک مشابه با نام انیمیشن.
انیمیشن خیلی زود شروع می شود
گاهی اوقات ممکن است نیاز داشته باشید که یک به تعویق انداختن سریع زودتر از شروع انیمیشن برای تجربه مصرف کننده بالاتر داشته باشید. این کار را با متعلقات انیمیشن-به تعویق انداختن انجام دهید.
ویژگی های CSS غیر متحرک
یکی دیگر از دلایل کار نکردن انیمیشن ممکن است این باشد که شما سعی می کنید یک ویژگی CSS را متحرک کنید که قابل انیمیشن نیست.
انیمیشن CSS پشتیبانی نمی شود
نقاشی های انیمیشن های CSS بر روی حداکثر مرورگرهای موبایل و کامپیوتر امروزی. با این حال، اگر از مرورگر قدیمیتر یا مدلی از مرورگر خود استفاده میکنید که در سالهای متمادی بهروز نبوده است، انیمیشنهای شما کار نمیکنند، بدون شک به دلیل از دست دادن کمک مرورگر.
اگر مرورگر را بهروزرسانی کردهاید و با این وجود مشکل دارید، سیاستهای انیمیشن خود را با پیشوندهای تأمینکننده بیشتر در خطمشیهای معتبر خود وارد کنید و دوباره انیمیشن را امتحان کنید.
خلاصه CSS اشتباه نوشته شده است
خلاصه CSS روشی عالی برای نوشتن CSS پاک کننده و کاهش مقدار کد در فایل شما است. متعلقات انیمیشن مختص آن خانه های CSS هستند:
- animation-period
- animation-call
- animation-postpone
- animation-direction
- animation-fill-mode
- animation-iteration-rely
- animation-play-nation
- Animation-timing-function
دو مقدار – یکی برای دوره انیمیشن و دیگری برای تماس انیمیشن – مورد نیاز است. علاوه بر آن ها، ترتیب مقادیر تعیین می کند که کدام قیمت به کدام متعلقات انیمیشن اختصاص داده شود.
مقادیر نامناسب باید باعث شود که انیمیشنی رفتاری غیر از آنچه انتظار دارید داشته باشد. بنابراین، اگر استفاده از کوتاهنویسی انیمیشن تعلق دارد، مطمئن شوید که مقادیر آن با ترتیب مناسب ایندکس شدهاند.
عملکرد آهسته
انیمیشن های CSS نسبت به انواع مختلف انیمیشن های اینترنتی تمایل به عملکرد کلی بالاتری دارند. با این حال، اکنون دیگر همه انیمیشنهای CSS برابر نیستند و چند الگوی پر جنب و جوش به تدریج عملکرد کلی را نسبت به سایرین کاهش میدهند.
اکثر انیمیشن های ساده CSS هیچ تاثیر عمده ای بر زمان بارگذاری صفحه وب ندارند. با این حال، هر چه نتایج بیشتری را در انیمیشن خود آپلود کنید، احتمال اینکه با مشکلات کلی عملکرد مواجه شوید، بسیار بیشتر است.
برای دوری از عملکرد کلی بد، Google توصیه میکند استفاده از انیمیشنهایی را که باعث رنگآمیزی مجدد میشوند، محدود کنید. رنگ در حالی است که مرورگر نمایش قابل مشاهده یک پیکسل صفحه وب اینترنتی را با کمک استفاده از پیکسل در صفحه ایجاد می کند. رنگها از مقدار قابل توجهی از قدرت پردازش استفاده میکنند، بنابراین تا جایی که میتوانید باید طیف وسیعی از رنگآمیزیها را به دلیل انیمیشنها محدود کنید.
متأسفانه، حداکثر خانههای CSS متحرک هنگام تغییر باعث رنگآمیزی مجدد میشوند. استثناهای این تبدیل (برای مواردی مانند مقیاس، چرخش و موقعیت) و کدورت، که ممکن است با حداقل تأثیر بر عملکرد کلی زنده باشند. در اینجا مرجعی وجود دارد که خانه های CSS در عین پر جنب و جوش باعث رنگ آمیزی مجدد می شوند.
با این حال، اجازه ندهید که شما را از حذف کامل انیمیشن ها منصرف کند. اگر با سرعت مشکل دارید، احتمالاً به این دلیل است که به دنبال اجرای فوری بسیاری از عناصر یا استفاده از انیمیشن برای حداقل یک جزئیات یا سازماندهی گسترده از عناصر هستید.
در وبسایتها، انیمیشنهای CSS درجه یک هستند، در حالی که از آنها برای زیباتر کردن تجربه استفاده میشود، بنابراین به یاد داشته باشید که آیا میخواهید یک انیمیشن پیچیده با بازدیدکنندگان تعامل داشته باشد یا خیر.
حرف آخر
بله، HubSpot به شما اجازه می دهد تا با استفاده از کد CSS مناسب، جهت انیمیشن ها را کنترل کنید. خوب! من کاملا موافقم که ویژگی جهت انیمیشن CSS چیزی است که بسیاری از مردم از آن آگاه نیستند.
اما بله، پس از مطالعه این وبلاگ، مطمئناً با روش هایی که می توانید انیمیشن ها را کنترل کنید و ظاهری جذاب و کاربرپسند به طراحی وب سایت خود بدهید، آشنا خواهید شد. پس برای چی منتظری؟ آماده ساختن طرحی باشید که برای مخاطب هدف شما جذاب باشد.