درصد-زمان در CSS

درک مفهوم درصد زمان در CSS

سلام دوستان! امروز می‌خواهیم درباره‌ی یک مفهوم کاربردی در CSS صحبت کنیم به نام درصد-زمان. این ویژگی در انیمیشن‌های CSS خیلی مفید و جالب است و به شما اجازه می‌دهد تا کنترل بیشتری روی چگونگی پخش انیمیشن‌ها داشته باشید.

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

این روش به خصوص زمانی کاربردی است که می‌خواهید انیمیشن‌ها نه به طور یکنواخت بلکه با تغییرات خاصی پیش بروند. مثلاً وقتی که چیزی باید به‌طور ناگهانی متوقف و دوباره شروع شود.

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

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

نمونه کد و توضیحات

@keyframes example {
    0% { background-color: red; }
    50% { background-color: yellow; }
    100% { background-color: green; }
}

.element {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

توضیحات خط به خط

@keyframes example
تعریف یک انیمیشن با نام example.

0% { background-color: red; }
در ابتدای انیمیشن (0% زمان)، رنگ پس‌زمینه قرمز است.

50% { background-color: yellow; }
در میانه انیمیشن (50% زمان)، رنگ پس‌زمینه زرد می‌شود.

100% { background-color: green; }
در پایان انیمیشن (100% زمان)، رنگ پس‌زمینه سبز است.

.element
انتخابگر CSS برای عنصری که انیمیشن باید بر روی آن اعمال شود.

animation-name: example;
مشخص کردن نام انیمیشن که همان example است.

animation-duration: 4s;
مدت زمان اجرای انیمیشن که در اینجا ۴ ثانیه است.

animation-iteration-count: infinite;
تعیین می‌کند که انیمیشن به صورت بی‌نهایت تکرار شود.