10 نمونه از انیمیشن‌های ساخته شده با CSS

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 18 اردیبهشت 1397
دسته بندی ها : css

مرورگرهای موبایلی ما هر روز در حال پیشرفت و قدرتمند شدن هستند، این بهتر شدن در نتیجه باعث می‌شود که بتوانیم بهتر انیمیشن‌های زیبا و شگفت انگیز را از طریق موبایل و در جستجوهای اینترنتی مشاهده کنیم. با ترکیب کردن این موضوع همراه با قدرت CSS این موضوع که بتوانیم بدون استفاده از تصاویر، موارد بسیار زیبایی را بسازیم ممکن شده است. 

نتیجه این موضوع در نهایت، انیمیشن‌های مقیاس‌پذیر، با قابلیت بارگذاری با سرعت بالا و جذاب است. 

1. Pure CSS Biker

در این مورد چیزهای بسیار عجیب زیادی را می‌توانید مشاهده کنید، باور کردن این موضوع که این طراحی با استفاده از تنها HTML و CSS ساخته شده بسیار سخت است. 

انیمیشن چرخشی و چندگانه، لایه‌های حرکتی و ترکیب این نماها، به  دوچرخه حالت ژله مانندی داده‌اند. 

2. Pure CSS Saturn Hula Hooping

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

3. Color Layers CSS Animation

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

4. Ice-Cream Loader

ما همیشه برای ساختن تصاویر زیبا به فرمت‌هایی مانند JPG یا PNG نیاز نداریم. در این طرح تنها از یک کانتینر مانند استفاده شده  است و بقیه الما‌ن‌ها به صورت CSS طراحی شده‌اند. در نتیجه کار بسیار زیبایی را می‌توانید مشاهده کنید که حتی کوچکتر از یک فایل GIF است.

5. Pure CSS Pigeons

وقتی شما المان‌های HTML را همراه با یک سری از شخصیت‌های هنری ترکیب می‌کنید، خروجی چیزی شبیه به زیر خواهد بود. این مورد یک انیمیشن بسیار نرم و در عین حال شلوغ و جذاب است. در این طرح مطمئنا از Keyframeهای بسیار زیادی استفاده شده که واقعا جای تشکر دارد. 

6. Sleeping Cat

استفاده ترکیبی از المان‌های مختلف ساده HTML همراه با انیمیشن‌های نامحسوس می‌تواند چنین کاراکتر بامزه و زیبایی را درست کند. در این انیمیشن برای کنترل موارد مختلف از Sass و قدرت متغیرها استفاده شده است. سعی کنید مواردی را در این انیمیشن تغییر دهید تا ببینید که چه اتفاقی می‌افتد.

7. Black Bear

رسیدن به یک انیمیشن ساده و روان تنها با پیروی کردن از قاعده‌های ساده و پایه HTML و CSS مهیا می‌شود. این انیمیشن تعداد المان‌ها را به صورت حداقل نگه می‌دارد و بهترین استفاده را از transformها می‌کند. 

8. CSS Sponge

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

9. Pure CSS Checkbox Mail

یکسری از keyframeها باعث می‌شود که انیمیشنی به این زیبایی درست شود. حالتی که در آن هرکاربری می‌تواند متوجه کاری که می‌خواهد انجام دهد شود. در اینجا می‌توانیم شاهد باز شدن یک پاکت و نامه درون آن باشیم.

10. Care Preloader

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

الهام بگیرید

هدف از قرار دادن چنین پستی در وبسایت تنها الهام گرفتن و استفاده کردن از طرح‌هایی است که در این مجموعه‌ها قرار می‌گیرد. در این مجموعه مطمئنا توانسته‌اید که موارد و نکات مثبت را مشاهده کنید، این موارد می‌توانند به بهترین نحو ممکن شما را یاری دهند.

منبع

مقالات پیشنهادی

۱۰ کاراکتر طراحی شده با HTML و CSS

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

10 چشم‌انداز که کاملا با CSS و SVG ساخته شده‌اند

شما می‌توانید با استفاده از SVG کارهای بسیار عجیب و غریبی را انجام دهید. این موضوع که توسعه دهندگان بتوانند کدهای گرافیکی را در مرورگر بدون استفاده از...

10 پروژه سه بعدی الهام بخش وب که با css و javascript ساخته شده اند

وب، راه طولانی را از اینترنت dial-up تا کنون طی کرده است. وب سایت ها امروزه تماما واکنش گرا شده اند و بر روی دستگاه های لمسی در دسترس هستند. اما مرورگ...

۱۰ صفحه ورود ساخته شده با HTML و CSS - بخش اول

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