مفهوم animation-timeline در CSS

زمانی که به انیمیشن‌های وب فکر می‌کنیم، CSS به عنوان یکی از بهترین و کارآمدترین روش‌ها برای ایجاد انیمیشن‌های زیبا و روان به ذهن می‌رسد. اما یکی از ویژگی‌هایی که شاید کمتر به آن پرداخته شده باشد، ویژگی animation-timeline است که می‌تواند به ما در مدیریت بهتر انیمیشن‌ها کمک کند. این ویژگی به ما اجازه می‌دهد تا تایم‌لاین انیمیشن‌ها را به صورت مجزا و قابل تنظیم تعریف کنیم و از این طریق کنترل بیشتری روی نحوه و زمان‌بندی اجرای انیمیشن‌ها داشته باشیم.

استفاده از animation-timeline در CSS به ما امکان می‌دهد که تمامی مراحل انیمیشن از جمله شروع، توقف و از سرگیری انیمیشن‌ها را دقیق‌تر تنظیم کنیم. این قابلیت به برنامه‌نویسان اجازه می‌دهد تا انیمیشن‌های پیچیده‌تر و همگام‌سازی‌های دقیق‌تری ایجاد کنند و از سوی دیگر بهره‌وری و کنترل بیشتری بر انیمیشن‌های خود داشته باشند.

گاهی اوقات ممکن است بخواهیم انیمیشنی به‌طور هم‌زمان با رویدادی خاص اجرا شود، یا به هنگام وقوع یک تغییر معین در یک کامپوننت به‌صورت خودکار متوقف شود. animation-timeline این امکان را به سادگی فراهم می‌سازد. به عنوان مثال، فرض کنید یک انیمیشن دارید که با کلیک کاربر شروع می‌شود و با کلیک مجدد متوقف می‌شود. با استفاده از تایم‌لاین، پیاده‌سازی این رفتار به مراتب ساده‌تر و قابل تنظیم‌تر خواهد بود.

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

در ادامه، نمونه کد ساده‌ای برای استفاده از animation-timeline آورده‌ایم تا این موضوع بیشتر روشن شود.

@keyframes example {
  0% {transform: translateX(0);}
  100% {transform: translateX(100px);}
}

.element {
  animation-name: example;
  animation-timeline: myTimeline;
  animation-duration: 4s;
}

در کد بالا، ابتدا ما انیمیشنی به نام example تعریف کرده‌ایم که یک المان را از نقطه 0 تا 100px به سمت محور x جابجا می‌کند.
سپس، از animation-timeline استفاده می‌کنیم تا تایم‌لاین مربوط به انیمیشن تنظیم شود.
با تعریف animation-duration به مقدار 4 ثانیه، این انیمیشن در مدت زمانی که انتظار می‌رفت اجرا خواهد شد.