ثبت نام

امکان عضویت غیر فعال است

آموزش کار با انیمیشن در CSS 3

CSS3_Animitions
ب

آموزش کار با انیمیشن در CSS 3

با سلام خدمت تمومکاربران عزیز پاتوق وردپرس.

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

 

اموزش استفاده از انیمیشن ها

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

 @keyframes در واقع یک تابع در سی اس اس میباشد که باعث میشود بع تدریج استایل یک کلاس یا… در یک مدت زمان مضخص تغییر کند و به استایل فعلی بازگردد.این کار باعث میشود که یک حرکتی در المنت مشخص شده رخ دهد

یک مثال ساده از انیمیشن ها به شکل زیر میباشد.

در مثال بالا، انیمیشن “example” را به عنصر “div” متصل می کند. طبق خواص تعیین شده، انیمیشن 4 ثانیه به طول می انجامد و به تدریج، رنگ عنصر div از قرمز به زرد تغییر می یابد. وقتی زمان animation تمام شد، به رنگ اصلی تبدیل می شود.

نکته ای که باید توجه شود این است که باید در انیمیشن ها حتما زمان انجام انیمیشننوشته شود در غیر این صورت مقدار پیشفرض صفر خواهد بود و انیمیشن اجرا نخواهد شد.

چند ویژگی مهم در انیمیشن ها:

  1.  تاخیر یک انیمیشن  : خاصیت animation-delay زمان تاخیر شروع یک تصویر متحرک را مشخص می نماید
  2.  تنظیم اجرای چندین بار یک انیمیشن    :ویژگی animation-iteration-count در CSS3 مشخص میکند که یک انیمیشن چند بار پشت سر هم اجرا شود. اگر میخواهید تصویری برای همیشه متحک باشد، باید به این خاصیت مقدار ” infinite” بدهید.

  3.  اجرای انیمیشن در جهت معکوس یا دوره های متناوب   :خاصیت animation-direction اجازه میدهد که انیمیشن در جهت معکوس اجرا شود. اگر به این خاصیت مقدار ” alternate” بدهید، بصورت یک در میان، به سمت جلو و سپس در جهت معکوس حرکت خواهد کرد. مقدار”reverse” نیز تصویر را مرتبا در جهت معکوس متحرک می سازد.

  4. مشخص کردن منحنی سرعت انیمیشن

    خاصیت animation-timing-function، منحنی سرعت انیمیشن را مشخص می کند. این خاصیت مقادیر زیر را می تواند داشته باشد:

    ► ease : یک تصویر متحرک را با حرکت آهسته شروع میکند، سپس سریع، و بعد از آن با آرامی پایان می یابد. (این مقدار، مقدار پیش فرض خاصیت است).

    ► linear : یک انیمیشن را با سرعت ثابت از شروع تا پایان مشخص میکند.

    ► ease-in : انیمیشنی با شروع آهسته مشخص میکند.

    ► ease-out : تصویری متحرک با پایانی آهسته را نمایش می دهد.

    ► ease-in-out : انیمیشنی با شروع و پایان آهسته.

    ► (cubic-bezier(n,n,n,n : اجازه می دهد خودتان مقادیر را در تابع  cubic-bezier مشخص کنید.

اینها مواردی است که ویژگی های انیمیشن ها را مشخص میکند.حتما باید توجه داشته باشد که این موارد را در باید به DIV ان المنتی بدهید ک میخواهید انیمیشن روی ان اجرا شود.

یک مثال کاربردی:

فرض کنید ما یک H3 داریم و میخواهیم وقتی موس روی این المنت با خاصیت H3 رفت انیمیشن fade in در روی ان اجرا شود.برای این کار باید مشابه زیر عمل کنیم.ابتدا باید کد مخصوص انیمیشن fade in رارا بنویسیم و معرفی کنیم و سپس به H3  یک عدد hover بدهیم و در این hover  نام انیمیشن را نامی که مشخص کردیم و زمان انجام این انیمیشن را مشخص کنیم.در این انیمیشن ما زمان را 1s در نظر گرفیتیم و در مرگر های مختلف نیز تعریف کردیم و همچنین مدت تکرار این انیمیشن را نیز برابر یک بار گرفیتم.

 

معرفی چند کتابخانه انیمیشن زیبا و کار امد

اما در زیر نیز یک پروزه عالی دکمه ای زیبا که با استفاده از انیمیشن و سی اس اس ساخته شده است را در زیر برای شما برای دانلود قرار دادیم که یمتوانید دانلود کرده و استفاده کنید.

دانلود سورس دکمه + انمیشن

به این پست امتیاز دهید.
آموزش کار با انیمیشن در CSS 3
5 از 1 رای

ارسال دیدگاه

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