0

سبد خرید شما خالی است.

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

انیمیشن ها در CSS

نویسنده ویرایشگر سایت
امتیاز مطلب
تعداد بازدید 106
تاریخ بروزرسانی ۱۷ مرداد ۱۳۹۸

آموزش ساخت انیمیشن با کمک CSS

CSS Animations

CSS Animations

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

 

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

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

 

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

برای ایجاد یک انیمیشن، باید به خواص (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 Animation Example_1

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

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
}

@keyframes mymove {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}

 

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

 CSS Animation Example_2

 

#object {
      background: #53a3dc;
      width: 150px;
      height: 150px;
      border-radius: 10px;
      text-align:center;
      line-height:150px;
      font-size:22px;
      color:#fefefe;
  }
  
   .flip-vertical-bck {
            animation: flip-vertical-bck 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  }
  
  @keyframes flip-vertical-bck {
    0% { transform: translateZ(0) rotateY(0); }
    50% {
              transform: translateZ(-260px) rotateY(-180deg);
              background: #dc537f;
              color:#dc537f;
    }
     100% { transform: translateZ(0) rotateY(0); }
  }

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

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

 

مطالب مرتبط
مطالعه :

ثبت نام ایران خودرو و ثبت نام سایپا یکی از پر درآمدترین کار های توافقی است که شما در این آموزش یادخواهید گرفت. با توجه به اینکه ثبت نام ایران خودرو تغییر یافته و همچنین ثبت نام سایپا به دو روش جدید انجام می گیرد در روش قدیم ثبت نام خودرو و روش جدید ثبت نام سایپا و ایرانخودرو با ما همراه باشید.

سئو سایت اصفهان
مطالعه : 20 دقیقه

سئو سایت اصفهان یکی از خدمات تیم طراحی سایت و سئو سایت وب یار می باشد. آیا تا کنون به سئو سایت خود فکر کرده اید؟ آیا می دانید برای بهینه سازی سایت خود چه فاکتورهایی را باید در نظر بگیرید؟

طراحی سایت حرفه ای در اصفهان
مطالعه :

در کلاس آموزش طراحی سایت اصفهان، طراحی وب سایت را به صورت عملی و پروژه محور به شما یاد خواهیم داد. طراحی سایت هم مثل هر تخصص دیگری باید به صورت عملی صورت گیرد تا بعداً بتوانید در بازار کار مشغول به فعالیت شوید.

تغییر پیش شماره های اصفهان
مطالعه :

تغییر پیش شماره اصفهان و شهرستان ها و دانلود لیست جدید طراحی سایت اصفهان و سئو سایت اصفهان وب یار با ارائه خدمات تخصصی به دنبال افزایش فروش و رونق کسب و کار مشتریان خود می باشد. شهرستان اردستان شهر اصفهان ​​ شهرستان آران و بیدگل ​​ شهرستان برخوار شهرستان نطنز​ توابع اصفهان​​​ شهرستان تیران و کرون​​ شهرستان چادگان شهرستان خمینی شهر​​ شهرستان خوانسار​​ شهرستان خورو بیابانک​​​ شهرستان دهاقان ​شهرستان سمیرم​​ شهرستان شاهین شهر و میمه​ شهرستان شهرضا​ شهرستان فریدن​ شهرستان فریدونشهر​ شهرستان فلاورجان​ شهرستان کاشان​ شهرستان گلپایگان شهرستان لنجان ​شهرستان مبارکه​ شهرستان نائین​ شهرستان نجف آباد برای تهیه لیست زیر بسیار وقت گذاشته شده و در یک فایل متن ساده و راحت آماده شده تا هر چه سریعتر کار اداری شما انجام گردد چون وقتتان خیلی با ارزش است طراحی سایت حرفه ای در اختیار داشتن یک سایت حرفه ای و حضور موثر در فضای مجازی و تجارت الکترونیک، از مهمترین ملزومات دنیای امروزی برای کسب درآمد عالی از این بستر جذاب است. تیم طراحی سایت اصفهان وب یار با ارائه سرویس های ویژه طراحی سایت ، سئو و اینترنت مارکتینگ این امکان را به شما می دهد که توسط طراحی سایت حرفه ای در میان برند مشاغل و شرکت های ملی و بین المللی، شناخته شده و به رقابت و کسب درآمد عالی بپردازید.   کلاس آموزش طراحی […]

آرایه ها در جاوا اسکریپت
مطالعه : 8 دقیقه

آرایه ها در جاوا اسکریپت جلسه هفتم     بعد از یادگیری انواع داده ها در جاوا اسکریپت نوبت به بحث آرایه ها میرسد که در این مطلب به توضیح موارد زیر که برای بحث آرایه ها در جاوا اسکریپت می باشد می پردازیم.   • آرایه چیست؟ • شکل کلی آرایه • نحوه ی دسترسی به آرایه • متدهای آرایه • متد ()length • متد()concat • متد ()join • متد ()pop • متد ()Push • متد ()splice • متد ()Slice   آرایه چیست؟ آرایه یک نوع خاص از متغیر ها است که با یک نام و نوع داده می توان چندین مقدار را در آن ذخیره کرد ، استفاده می شود. شکل کلی آرایه شکل کلی آرایه به صورت زیر می باشد که array-name نام آرایه است و item آیتم های آرایه می باشد. var array-name = [item1, item2, …]; می خواهیم آرایه ای برای فروشندگان تعریف کنیم که در هر جای دیگر احتیاج به مشخصات فروشندگان داشتیم نیازی به تکرار همه ی اطلاعات نداشته باشیم. در مثال زیر میبینید که نام آرایه shop می باشد ‎و محصولات با نام های مربوطه در قسمت item نوشته شدند. <p id=”demo”>pen,eraiser,ball</p> <script> var shop = [“pen”, “eraiser”, “ball”]; document.getElementById(“demo”).innerHTML = shop; </script> اولین خانه ی آرایه با محتوای والیبال پر می شود. می دانیم که خانه های آرایه از 0 شروع […]

فریم ورک های جاوا اسکریپت
مطالعه : 10 دقیقه

 Best Javascript Frameworks 2019   منظور از فریم ورک جاوا اسکریپت چیست؟ در دنیای برنامه نویسی و توسعه، عبارت « فریم ورک جاوا اسکریپت » به کتابخانه ای از جاوا اسکریپت اشاره می کند که رابط های کاربری تعاملی و داده محور ارائه می دهد. این فریم ورک ها به گونه ای طراحی شده اند که در هنگام ایجاد تعامل با استفاده از یک برنامه یا رابط، به تهیه داده برای کاربران کمک می کنند. فریم ورک های جاوا اسکریپت با یکدیگر متفاوت اند اما هدف نهایشان یکی است: نمایش داده های جدید به محض اینکه کاربر، یک اقدام تعاملی را آغاز می کند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا مروری بر ویژگی های محبوب چند مورد از فریم ورک های جاوا اسکریپت داشته باشیم.   خصوصیات فریم ورک های جاوا اسکریپت   1) موثر بودن: شما می توانید برنامه های موبایل، دسکتاپ و یا سایر رابط های کاربری سطح بالا را در مدت چند هفته و یا حتی چند روز بسازید! 2) امن بودن: همه فریم ورک های رایج و محبوب جاوا اسکریپت دارای تنظیمات امنیتی مطمئن هستند. طیف وسیعی از برنامه نویسان، تست کنندگان و کاربران نیز از این فریم ورک ها پشتیبانی می کنند. 3) کم هزینه بودن بیشتر فریم ورک های جاوا اسکریپت به صورت متن باز (open-source) و رایگان هستند که […]

دیدگاه ها

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *