CSS انیمیشن و ترنزیشن پیش‌فرض: - ارث‌بری نمی‌شود

@keyframes

کادرهای کلیدی انیمیشن را تعریف می‌کند؛ از درصد (0% تا 100%) یا from/to برای توصیف حالت‌های میانی استفاده می‌شود و ستون انیمیشن‌های چندمرحله‌ای CSS است.

سینتکس

@keyframes <name> { from { ... } to { ... } }

مثال کاربردی

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

مقادیر رایج

from / to شکل کوتاه دو حالته

0% ... 100% کنترل درصدی کامل

موارد مرتبط در CSS

animation animation-delay animation-duration animation-iteration-count animation-name animation-timing-function