در این مطلب قصد نداریم در رابطه با خوبی های استفاده از انیمیشن های CSS یا این که سرعت انیمیشن های JS بیشتر از CSS هست صحبت کنیم.
در این مطلب کاری که میخوایم انجام بدیم به اشتراک گذاشتن مجموعه ای از ابزارها، فریمورکها و آموزشهایی با شما است که به شما در یادگیری کار با انیمیشنهای CSS کمک میکنند و باعث صرفهجویی زمانی در ساخت انیمیشنها میشوند.
Animate.css
Animate.css مجوعهای از انیمیشن های CSS است که شما میتوانید از آنها در اسلایدرها، صفحات اصلی و قسمتهای دیگر پروژه تحت وب خود استفاده کنید.
Stylie
Stylie یک ابزار تحت وب است که شما با استفاده از آن میتوانید انیمیشن های CSS ای خود را با آن ایجاد و کانفیگ کنید.
animo.js
animo.js یک ابزار قدرتمند در زمینه مدیریت انیمیشن های CSS هست. شما به راحتی با استفاده از آن میتونید انیمیشنها را زمان بندی کنید و بگویید که برای مثال انیمیشنها پشت سر هم بعد از اتمام انیمیشن قبلی اجرا شوند.
Anima
Anima به شما این امکان را میدهد که در یک زمان هر چند انیمیشن که میخواهید اجرا کنید و هر کدام حالت مختص به خودش را داشته باشد. Anima از CSS transforms و ۳d-transform و Javascript در کنار هم برای ساخت انیمیشن استفاده میکند.
Rocket
Rocket یک ابزار ساده برای ایجاد انیمیشن تحت وب هست.
CSS Shake
CSS Shake مجوعه ای انیمیشن های CSS است که باعث لرزیدن و تکان خوردن DOM ها میشوند.
Magic Animations
Magic Animations یک کتابخانه کوچک شامل انیمیشنهای CSS میباشد.
Hover.css
Hover.css مجموعه ای از انیمیشن ها برای دکمه ها (Button) در زمان Hover شدن هست.
Saffron
Saffron یک کتابخانه تحت Sass هست که شامل انیمیشن ها و transition های تحت CSS است.
CSSynth
CSSynth یک ابزار تحت وب برای اجرا کردن انیمیشنها به نوبت است.
Ceaser
Ceaser یک ابزار برای آسان کردن ساخت انیمیشن در پروژه است.
Tridiv
Tridiv یک ابزار تحت وب برای ساخت اشکال هندسی ۳D با استفاده از CSS است. این ابزار cross-browser بوده و با اکثر مرورگر ها همخوانی دارد و شما قبل از هر کاری میتوانید چند نمونه آماده از اشکال رو با استفاده از این ابزار نگاه کنید.
Morf.js
Morf.js یک ابزار تحت Javascript است که به شما امکان ساخت transition و افکت های دلخواه تحت CSS را میدهد.
CSS3 Keyframes Animation Generator
CSS3 Keyframes Animation Generator همانطور که اسمش پیداست, امکان ساخت انیمیشن های keyframe تحت CSS3 را به شما میدهد.
Effeckt.css
Effeckt.css یک کتابخانه حاوی تعدادی انیمیشن و transition های UI-less میباشد ا که شما میتوانید از آن ها در پروژه خود استفاده کنید.
[youtube id=”Qc40YDFA4Bg” width=”600″ height=”330″ position=”center”]
CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet لیستی از انیمیشنهای CSSپیش ساختهای هستکه شما میتوانید از آن ها در پروژه خود استفاده کنید.
منبع: speckyboy
خیلی عالی
ممنون از شما
سلام به همه
آقا چرا دیر به دیر آپدیت می شین؟
خیلی سایت خوبیه. عالیه. منم می خوام در مورد گیم دیزاین توش بنویسم!
این پست فوق العاده بود
بیسته بیسته کارتون
واقعا کارت درسته
خوب؛ مثل این که عمر این سایت هم به سر اومد!
سلام
الان بیشتر از یه ماهه که مطلب جدیدی نذاشتید
من همیشه سایتو چک میکنم
چرا واقعا ؟ 🙁