0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

چگونه انیمیشن بسازیم؟

نویسنده پشتیبانی وب یار
امتیاز مطلب
5/5 - (3 امتیاز)
تعداد بازدید 1345
تاریخ بروزرسانی ۱۴ خرداد ۱۴۰۱

آموزش ساخت انیمیشن در css

انیمیشن css ، تغییر حالت (Transition) تدریجی از یک استایل خاص به استایلی دیگر را میسر می کنند. انیمیشن ها از دو جزء تشکیل شده اند، استایلی که CSS مربوط به انیمیشن را مشخص نموده و مجموعه ای از نقاط عطف (keyframes) که حالت های شروع و پایان استایل های انیمیشن و همچنین ایستگاه های میانی را تعیین می کنند.

تیم طراحی سایت اصفهان وب یار، شما عزیزان را به خواندن این مقاله دعوت می کند؛ همچنین پذیرای علاقمندان به یادگیری طراحی سایت در کلاس آموزشی طراحی سایت اصفهان وب یار می باشد.

در اینجا سه مورد از دلایل برتری انیمیشن های CSS نسبت به انیمیشن های اسکریپت محور را لیست کرده ایم:

1) استفاده از انیمیشن های CSS برای ساخت انیمیشن های ساده، بسیار آسان تر است. حتی بدون دانستن جاوا اسکریپت هم می توانید انیمیشن بسازید!
2) انیمیشن های CSS خیلی روان اجرا می شوند، حتی در سیستم هایی با قدرت تحلیل ضعیف؛ انیمیشن های ساده، اغلب در جاوا اسکریپت اجرای ضعیفی دارند (مگر آنکه به خوبی نوشته شده باشند). موتورهای گرافیکی می توانند Keyframe ها را حین اجرا، رندر (Render) کنند تا اجرای پیوسته و مطلوبی به نمایش گذاشته شود.
3) اگر به مرورگرها اجازه کنترل انیمیشن ها داده شود، خروجی اجرایی بهینه تر و کارآمدتری را شاهد خواهیم بود؛ برای مثال کاهش تعداد آپدیت انیمشن هایی که در سایر تب های مرورگر باز هستند اما دیده نمی شوند.

      چگونه با کمک CSS انیمیشن بسازیم؟ (CSS Animations)

      ساخت انیمیشن در css
      CSS Animations

      برای ساخت انیمیشن در css ، باید به خواص (CSS Properties) المان مورد نظرتان، خاصیت animation یا زیر دسته هایش را اضافه کنید. این کار به شما اجازه می دهد تا مدت و سرعت اجرای کل انیمیشن و سایر جزئیاتی که تعیین می کند این انیمیشن چگونه باید پیش برود را مدیریت کنید.

      مروری بر زیردسته های خاصیت animation:

      animation-name

      نام متناظر با keyframe@ را مشخص می کند که برای توصیف نقاط عطف انیمیشن استفاده می شود.

      animation-duration

      مدت زمانی که انیمیشن یک بار به طور کامل اجرا می شود را تنظیم می کند.

      animation-timing-function

      شتاب پیشروی انیمیشن به صورت منحنی یا خط مستقیم را مشخص می کند.

      animation-delay

      میزان تأخیر لود شدن المان مورد نظر نسبت به شروع انیمیشن را تنظیم می کند.

      animation-iteration-count

      تعداد دفعاتی که انیمیشن باید تکرار شود را تعیین می کند. اگر مقدار infinite را قرار دهید، انیمیشن به صورت پیوسته و دائم اجرا می شود.

      animation-direction

      تعیین می کند که انیمیشن بعد از هر بار اجرای کامل، اجرای بعدی را مجدد از ابتدا نمایش دهد یا در جهت عکس.

      animation-fill-mode

      انیمیشن های CSS درحالت عادی، قبل از اجرای اولین و بعد از اجرای آخرین keyframe روی المان مورد نظر تغییری اعمال نمی کنند. با به کار بردن این خاصیت، می توانید چنین تغییری را صورت دهید.

      animation-play-state

      برای توقف یا ادامه دادن به اجرای انیمیشن به کار می آید.

      CSS Keyframes

      پس از اینکه تایمینگ انیمیشن خود را مشخص کردید، نوبت به تعیین شکل اجرای انیمیشن با تعریف حداقل دو نقطه عطف (Keyframe) و با استفاده از keyframes@ می رسد. هر keyframe نشان می دهد که تغییرات استایل المان مورد نظر در خلال اجرای انیمیشن چگونه باید به وقوع بپیوندد.
      از آنجا که تایمینگ انیمیشن در استایل های مربوط به المان مورد نظر تعریف می شود، برای مشخص شدن لحظه شروع keyframe ها، درصد به کار می برند. این گونه که 0% برای لحظه شروع انیمیشن و 100% برای پایان آن لحاظ شده است که گاهی از from و to بجای آن ها استفاده می شود.

      نمونه انیمیشن css

      نمونه اول – حرکت بلوک قرمز به پایین و تغییر رنگ آن به آبی

      CSS Animation Example_1

      کدهای این انیمیشن به شکل زیر هستند:

      نمونه دوم ساخت انیمیشن در css – فلیپ شدن کارت به همراه تغییر رنگ و محو شدن نوشته

       CSS Animation Example_2

      افکت ها و انیمیشن های حرفه ای و جذاب زیادی در سایت انیمیستا وجود دارد که پیشنهاد می دهیم حتماً ببینید و استفاده ببرید و ما را با نظرات گرم خود خوشحال کنید.

      به روز و پیروز باشید!

      5/5 - (3 امتیاز)
      مطالب مرتبط
      دیدگاه ها

      دیدگاهتان را بنویسید

      نشانی ایمیل شما منتشر نخواهد شد.