CSS / Animation ба keyframe

Animation ба keyframe

CSS Animation нь элементэд олон алхамтай, автомат, давтагдах хөдөлгөөн нэмэх боломжийг олгоно. Transition нь зөвхөн А→Б шилжилт хийдэг бол Animation нь А→Б→В→Г... олон үе дамжих боломжтой.

@keyframes — хөдөлгөөний тодорхойлолт

css

@keyframes animation-name {
  from {
    /* эхний төлөв */
  }
  to {
    /* эцсийн төлөв */
  }
}

/* Эсвэл хувиар */
@keyframes animation-name {
  0% {
    /* эхлэл */
  }
  50% {
    /* дунд */
  }
  100% {
    /* төгсгөл */
  }
}

animation property-ууд

css

.element {
  animation-name: fadeIn; /* @keyframes нэр */
  animation-duration: 0.5s; /* хэр удаан */
  animation-timing-function: ease-out; /* хурдны муруй */
  animation-delay: 0.1s; /* хойшлуулах */
  animation-iteration-count: 1; /* давтах тоо (infinite боломжтой) */
  animation-direction: normal; /* чиглэл */
  animation-fill-mode: forwards; /* дуусаад хаана үлдэх */
  animation-play-state: running; /* running / paused */
}

Shorthand

css

/* animation: name duration timing-function delay iteration-count direction fill-mode */
.element {
  animation: fadeIn 0.5s ease-out 0s 1 normal forwards;

  /* Ихэвчлэн товч хэлбэрт */
  animation: fadeIn 0.5s ease-out forwards;
}

animation-fill-mode — дуусаад хаана үлдэх

css

.element {
  animation-fill-mode: none; /* анхдагч — эхний төлөвт буцна */
  animation-fill-mode: forwards; /* 100%-ийн төлөвт үлдэнэ */
  animation-fill-mode: backwards; /* анимац эхлэхээс өмнө 0%-ийн төлөв */
  animation-fill-mode: both; /* backwards + forwards хоёулаа */
}

Жишээ — forwards яагаад чухал:

css

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.card {
  animation: slideIn 0.4s ease-out forwards;
  /* forwards байхгүй бол дуусаад translateX(-100%) руу буцна */
}

animation-iteration-count — давтах

css

.spinner {
  animation-iteration-count: infinite;
} /* тасралтгүй */
.pulse {
  animation-iteration-count: 3;
} /* 3 удаа */
.once {
  animation-iteration-count: 1;
} /* нэг удаа (анхдагч) */

animation-direction — чиглэл

css

.element {
  animation-direction: normal; /* 0% → 100% (анхдагч) */
  animation-direction: reverse; /* 100% → 0% */
  animation-direction: alternate; /* 0%→100%, 100%→0%, ... */
  animation-direction: alternate-reverse; /* 100%→0%, 0%→100%, ... */
}

Нийтлэг анимац жишээнүүд

1. Fade in — гарч ирэх:

css

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-content {
  animation: fadeIn 0.4s ease-out forwards;
}

2. Slide up — доороос гарч ирэх:

css

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

.card {
  animation: slideUp 0.4s ease-out forwards;
}

/* Дараалсан карт */
.card:nth-child(1) {
  animation-delay: 0s;
}
.card:nth-child(2) {
  animation-delay: 0.08s;
}
.card:nth-child(3) {
  animation-delay: 0.16s;
}
.card:nth-child(4) {
  animation-delay: 0.24s;
}

3. Spinner — тасралтгүй эргэх:

css

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #1e293b;
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

4. Pulse — анхааруулах цохилт:

css

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.badge-live {
  animation: pulse 2s ease-in-out infinite;
}

5. Shimmer — ачааллах skeleton:

css

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}
.skeleton-title {
  height: 28px;
  width: 60%;
  margin-bottom: 16px;
}

6. Bounce — харайх:

css

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-16px);
    animation-timing-function: ease-in;
  }
}

.icon-bounce {
  animation: bounce 1s infinite;
}

prefers-reduced-motion — хөдөлгөөнийг хязгаарлах

Зарим хэрэглэгчид (epilepsy, vestibular disorder) хөдөлгөөнт зурагт мэдрэмтгий байдаг. Систем тохируулгыг хүндэтгэх нь accessibility-ийн шаардлага:

css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Олон анимац нэгэн зэрэг

css

.element {
  animation:
    fadeIn 0.4s ease-out forwards,
    slideUp 0.4s ease-out forwards;
}

Дараагийн хичээлд:

transform property-г судална — rotate(), scale(), translate(), skew() функцуудыг ашиглан элементийг хэлбэр дүрс өөрчлөх, мөн transition, animation-тай хослуулах жишээнүүд.

← Өмнөх хичээлTransition Дараах хичээл →Transform (rotate, scale, translate)