گروپ دیزاین | ارائه دهنده خدمات نوین

ساخت انیمیشن با css3

 5 آذر 1393
ساخت انیمیشن با css3
لطفا به این مطلب رای بدهید.

CSS3 راه راهی زیادی برای توسعه دهندگان طراحان UI /UX پیش رو گذاشته است . بهترین و جالب ترین اینها transiton ها و انیمیشن ها هستند. فقط چند خط کافیست کاربران خود را هیجان زده کنید !

زمانی که به خوبی از این امکانات استفاده کنید نتیجه بسیار خوب خواهید داشت . چیز های بسیار جدید تری در css3 و html5 وجود دارد .مثل استفاده از شتاب سنج گوشی و تبلت ! استفاده از GPS داخلی گوشی و…

در این مقاله یکسری از متناوب ترین و پر کاربردترین تکنیک هارا خواهید دید که پس از استفاده از این تکنیک ها لبخندی به کاربران خودتون هدیه میدین ! همه این افکت ها فقط با یک transition ساده پیاده سازی شده اند

مبانی انیمیشن در CSS3

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

توجه کنید :

ما مثلا قصد داریم وقتی موس روی یک لینک قرار گرفت رنگ اون لینک آبی بشه . خب معمولی میگیم وقتی Hover شد color:blue; انیمیشن هم همینه با یه چیز اضافه که کارو حرفه ای می کنه با این تکنیک میگیم حالا ما قصد دارین همین تغیر رنگ یهو انجام نشه !آروم آروم تغیر رنگ بده که ببینیم رنگ نپره ! حالا می تونیم مشخص کنیم چقدر این تغیر رنگ زمان ببره یا حتی بگیم اولش زود تغیر رنگ بده آخر که رسید یواش تر . می تونیم مشخص کنیم زمانی رو تاخیر داشته باشه که اینو بهتون نشون میدم

مهمترین چیزی که استفاده می کنیم transiton هست این خصیصه چند مقدار میگیره

transition:property duration [delay] [timin-funcion];

property :

چیزی که قصد انیمیش دار شدن اون رو داریم می تونه رنگ باشه تغیر اندازه . مارجین . پدینگ کلا بیشتر چیزایی که برای طراحی استفاده می کنیم . یا می تونید all قرار بدید این مقدار اول اجباری هست و باید مشخص کنید برای چه چیزی دارین زمان مشخص می کنید و برای ما هم مهمترین قسمت

Duration :

زمان اجرای انیمیشن هست . این مقدار با ثانیه هست مثل : ۱s . 2s . 0.5s . 0.3s یا هر زمان دیگر . بنا به استفاده این زمان روکم و زیاد کنید

توصیه :

زمان رو زیاد نکنید و برای هر چیزی از transiton استفاده نکنید یک تغیر رنگ مثلا برای لینک های منو رو ۲ثانیه نزارید این کار کاربر پسند نیست فقط اونقدری بدید که کاربر ببینه ۰٫۲s هم دیده میشه پس سعی نکنید کار بر رو خسته کنید

delay :

این مقدار هم با ثانیه هست . شاید ما قصد این رو دارین رنگ ضمینه یک ثانیه تاخیر داشته باشه ولی رنگ متن بدون تاخیر . این مقدار اختیاری هست و اگه نزارید همون صفر هست بدون تاخیر

timin-funcion :

این مقدار شاید کمی براتون درکش سخت باشه . شاید بگید یعنی چی تغیر رنگ رو تو یک ثانیه انجام بده ولی : اولش سریع بعد آروم . من بهتون این لینک رو پیشنهاد می کنم حتما براتون جا میوفته سایت بسیار بسیار کاربردی cubic-bezier.com این مقدار هم اختیاری هست

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

تست اول

۱_ fade-in ظاهر شدن

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

ظاهر شدن

 

۲_Change color تغیر رنگ

تغیر رنگ در css3 به همراه انیمیشن

تغیر رنگ

۳_Grow & Shrink بزرگ شدن

بزرگ کردن عنصری در css3 به همراه انیمیشن

بزرگ شدن

۴_Rotate elements چرخش

چرخندان عناصر در CSS3 موقع هاور به همراه انیمیشن

چرخش

 

۵_Square to circle تبدیل مربع به دایره

تبدیل مربع به دایره با css3

مربع به دایره

 

۶_۳D shadow سایه سه بعدی

ایجاد سایه سه بعدی

سایه

 

۷_ شناور

بحث ایجاد اینیمیش animation نیاز به یک مقاله دیگر دارد .

شناور

 

۹_Inset border بردر درونی

از دورن پر کردن border با انیمیشن

بردر درونی

 

دیدگاه بگذارید

avatar
  Subscribe  
Notify of