ابزار ها و فریمورک هایی برای ساخت انیمیشن با CSS

در این مطلب قصد نداریم در رابطه با خوبی های استفاده از انیمیشن های CSS یا این که سرعت انیمیشن های JS بیشتر از CSS هست صحبت کنیم.

در این مطلب کاری که میخوایم انجام بدیم به اشتراک گذاشتن مجموعه ای از ابزارها، فریمورک‌ها و آموزش‌هایی با شما است که به شما در یادگیری کار با انیمیشن‌های CSS کمک می‌کنند و باعث صرفه‌جویی زمانی در ساخت انیمیشن‌ها می‌شوند.

Animate.css

Animate.css مجوعه‌ای از انیمیشن های CSS است که شما می‌توانید از آنها در اسلایدرها، صفحات اصلی و قسمت‌های دیگر پروژه تحت وب خود استفاده کنید.

css_animation_01

Stylie

Stylie یک ابزار تحت وب است که شما با استفاده از آن می‌توانید انیمیشن های CSS ای خود را با آن ایجاد و کانفیگ کنید.

css_animation_02

animo.js

animo.js یک ابزار قدرتمند در زمینه مدیریت انیمیشن های CSS هست. شما به راحتی با استفاده از آن می‌تونید انیمیشن‌ها را زمان بندی کنید و بگویید که برای مثال انیمیشن‌ها پشت سر هم بعد از اتمام انیمیشن قبلی اجرا شوند.

css_animation_03

Anima

Anima به شما این امکان را می‌دهد که در یک زمان هر چند انیمیشن که می‌خواهید اجرا کنید و هر کدام حالت مختص به خودش را داشته باشد. Anima از CSS transforms و 3d-transform و Javascript در کنار هم برای ساخت انیمیشن استفاده می‌کند.

css_animation_04

Rocket

Rocket یک ابزار ساده برای ایجاد انیمیشن تحت وب هست.

wk_newss_04

 

CSS Shake

CSS Shake مجوعه ای انیمیشن های CSS است که باعث لرزیدن و تکان خوردن DOM ها می‌شوند.

css_tools_resources_01

 

Magic Animations

Magic Animations یک کتابخانه کوچک شامل انیمیشنهای CSS می‌باشد.

css_tools_resources_02

 

Hover.css

Hover.css مجموعه ای از انیمیشن ها برای دکمه ها (Button) در زمان Hover شدن  هست.

css_tools_resources_03

 

Saffron

Saffron یک کتابخانه تحت Sass هست که شامل انیمیشن ها و transition های تحت CSS است.

css_tools_resources_04

 

CSSynth

CSSynth یک ابزار تحت وب برای اجرا کردن انیمیشن‌ها به نوبت  است.

css_tools_resources_36

 

 

Ceaser

Ceaser یک ابزار برای آسان کردن ساخت انیمیشن در پروژه است.

css_animation_05

 

Tridiv

Tridiv یک ابزار تحت وب برای ساخت اشکال هندسی 3D با استفاده از CSS است. این ابزار cross-browser بوده و با اکثر مرورگر ها همخوانی دارد و شما قبل از هر کاری می‌توانید چند نمونه آماده از اشکال رو با استفاده از این ابزار نگاه کنید.

css_animation_06

 

Morf.js

Morf.js یک ابزار تحت Javascript است که به شما امکان ساخت transition و افکت های دلخواه تحت CSS را می‌دهد.

css_animation_08

 

 

CSS3 Keyframes Animation Generator

CSS3 Keyframes Animation Generator  همانطور که اسمش پیداست, امکان ساخت انیمیشن های keyframe تحت CSS3 را به شما می‌دهد.

css_animation_09

 

 

Effeckt.css

Effeckt.css یک کتابخانه حاوی تعدادی انیمیشن و transition های UI-less می‌باشد ا که شما می‌توانید از آن ها در پروژه خود استفاده کنید.

CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet لیستی از انیمیشن‌های CSSپیش ساخته‌ای هستکه شما می‌توانید از آن ها در پروژه خود استفاده کنید.

css_animation_10

 

منبع: speckyboy

عرفان بشارت

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

همچنین ممکن است دوست داشته باشید ...

۶ واکنش

  1. حسن گفت:

    خیلی عالی
    ممنون از شما

  2. علی گفت:

    سلام به همه
    آقا چرا دیر به دیر آپدیت می شین؟
    خیلی سایت خوبیه. عالیه. منم می خوام در مورد گیم دیزاین توش بنویسم!

  3. امید گفت:

    این پست فوق العاده بود
    بیسته بیسته کارتون

  4. حسین گفت:

    واقعا کارت درسته

  5. مسعود گفت:

    خوب؛ مثل این که عمر این سایت هم به سر اومد!

  6. Erfan گفت:

    سلام
    الان بیشتر از یه ماهه که مطلب جدیدی نذاشتید
    من همیشه سایتو چک میکنم
    چرا واقعا ؟ 🙁

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

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