انیمیشن با CSS

سال‌ها پیش که CSS نسخه 3 و html نسخه 5 آمده بود، ما برای تفریح به نمونه قابلیت‌های آن می‌پرداختیم اما امروزه بیش از 90 درصد کاربران از براوزرهای مدرن استفاده می‌کنند و یادگیری آن، علاوه بر زیبایی طراحی، موجب صرفه‌جویی در بخش زیادی از js هایی می‌شود که برای تولید افکت رویدادهای مختلف نوشته می‌شد مثل js های مولد انیمیشن. و به دلیل built-in بودن آن، طبعا اجرای انیمیشن‌های CSS نرم‌تر از js خواهد بود.

transition و animation دونمونه از این قابلیت‌هاست که در تمامی براوزرهای مدرن پشتیبانی می‌شود. مثلا اگر بخواهید زمانی که یک کلاس به المان شما اضافه شد، یا زمانی که موس روی لینک‌ها رفت، رنگ متن و بکگراندش تغییر کند، می‌توانید با کمک CSS2 این کار را انجام دهید اما اگر بخواهید این کار با کمی انیمیشن و طی مثلا 1 یا 2 ثانیه انجام شود، می‌توانید یک خط به کدتان اضافه کنید:

.myClass, a:hover{
    color:#123;
    background-color:#def;
    transition:color 1s linear, background-color 2s ease;
    -webkit-transition:color 1s linear, background-color 2s ease;
}

البته برای مرورگرهای اندرویدی لازم است از پیشوند -webkit- استفاده شود و لذا خط آخر کد فوق برای همین با پیشوند -webkit- تکرار شده است.

دقت کنید که انیمیشن‌های CSS در اکثر موارد برای زیباتر شدن صفحه ما کاربرد دارد و اگر هم براوزر کاربر آن را پشتیبانی نکند، مشکلی پیش نمی‌آید هرچند همانطور که گفته شد، براوزرهای مدرن همگی html5, CSS3 را پشتیبانی می‌کنند و براوزرهای قدیمی (مانند IE8) حتی توسط سایت‌های معروفی همچون جیمیل نیز به صورت کامل و درست پشتیبانی نمی‌شود.
برای آشنایی مقدماتی با این مبحث این مطلب را ببینید و برای درک عمیق‌تر انیمیشن در CSS3 می‌توانید این مقالهرا مطالعه کنید.

برخی کاربردهای رایج انیمیشن‌های CSS در طراحی وب

انیمیشن‌های لودینگ
این انیمیشن‌ها عمدتا برای نمایش انتظار انجام درخواست ای‌جکسی کاربرد دارد) که در مطلب روش حذف درخواست loading به آن پرداختم و چند نمونه سایت برای تولید (Generate) کدهای آن معرفی کردم.
افکت روی نمایش/اخفای یک المان بعد از اضافه شدن یک کلاس به آن
در این زمینه، Animate.css سنگ تمام گذاشته و ده‌ها نمونه انیمیشن زیبا برای این منظور را در یک فایل css چهل کیلوبایتی گنجانده که شما با افزودن آن به صفحه خود می‌توانید به سادگی آن را در هر جا نیاز داشتید استفاده کنید.
پروژه AniJS نیز بر مبنای Animate.css تهیه شده است.
افکت روی یک المان بعد از رفتن موس روی آن
پروژه Hover.css مشابه پروژه فوق است که افکت‌های مختلف css3 برای hover را برای شما فراهم و در یک جا جمع کرده است.
خانم ماری‌لو هم در این صفحه و این صفحه تعدادی افکت انیمیشنی زیبا با css3 را برای لینک‌ها فراهم آورده است.

چند نمونه زیبا و آموزشی:

Vincent Tantardini در این مطلب جدید خود، پس از آموزش مختصر انیمیشن در CSS یک نمونه چشم‌نواز تهیه کرده است که توصیه می‌کنم دیدنش را از دست ندهید.

در این مطلب نیز می‌توانید 20 نمونه و آموزش را در این خصوص مشاهده کنید. اینجا نیز یک مجموعه آموزشی پایه خوب گردآوری شده است که برای یادگیری توصیه می‌شود.

منبع