انیمیشن‌های CSS

انیمیشن‌های CSS یکی از ویژگی‌های جالب و کاربردی CSS است که به شما امکان می‌دهد تا رفتار عناصر HTML را به صورت دینامیک تغییر دهید و به آنها جانی دوباره ببخشید. با استفاده از انیمیشن‌ها، می‌توانید تجربه کاربری بسیار بهتری ایجاد کنید و در عین حال از نظر بصری صفحات وب خود را جذاب‌تر کنید. این ویژگی در CSS به شما اجازه می‌دهد تا ویژگی‌های مختلف را در یک بازه زمانی مشخص تغییر دهید.

دلیل اول استفاده از انیمیشن‌های CSS این است که آنها به صورت طبیعی با HTML و CSS ادغام شده‌اند و نیازی به اضافه کردن کتابخانه‌های جاوااسکریپت ندارند، که خود به بهینه‌تر شدن و سریع‌تر بارگزاری صفحات وب کمک می‌کند. این ویژگی‌ها با کمک کلمات کلیدی مثل animation-name, animation-duration, و keyframes تعریف و کنترل می‌شوند.

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

در نهایت، استفاده از انیمیشن‌های CSS بسیار ساده است و با کمی آموزش، می‌توانید به طراح حرفه‌ای تبدیل شوید. حالا که دلایل استفاده از انیمیشن‌های CSS را توضیح دادیم، بیایید نگاهی به نمونه کد و نحوه کار با آن بیندازیم.

<style>
  .animated-element {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: example;
    animation-duration: 4s;
  }

  @keyframes example {
    0% {background-color: blue;}
    50% {background-color: green;}
    100% {background-color: red;}
  }
</style>
<div class="animated-element"></div>

<style>: تگ استایل برای افزودن CSS داخلی استفاده می‌شود.
.animated-element { }: انتخابگر برای عنصر HTML که می‌خواهیم انیمیشن را روی آن اعمال کنیم.
width و height: ویژگی‌های طول و عرض عنصر را تعیین می‌کنند.
background-color: blue;: رنگ پس‌زمینه اولیه عنصر را تنظیم می‌کند.
animation-name: نام انیمیشن تعریف شده در @keyframes را مشخص می‌کند.
animation-duration: مدت زمان اجرای انیمیشن را تنظیم می‌کند.
@keyframes example { }: بلوک تعریف انیمیشن برای مشخص کردن تغییرات در درصدهای مختلف زمان است.
0%, 50%, 100%: درصدهای مختلفی که مشخص می‌کند انیمیشن در هر زمان تغییرات چگونه باشد.
background-color: رنگ پس‌زمینه‌ای که در هر مرحله از انیمیشن تغییر می‌کند.