CSS / Transition

Transition

Transition нь CSS property өөрчлөгдөх үед тэр өөрчлөлтийг жигд, зөөлөн болгодог механизм юм. JavaScript хэрэгтэйгүй, зөвхөн CSS-ээр дуусгана.

Үндсэн синтакс

css

.element {
  transition: property duration timing-function delay;
}

| Property | Утга | Жишээ | | ---------------------------- | ------------------------ | ------------------- | | transition-property | Ямар property өөрчлөгдөх | background, all | | transition-duration | Хэр удаан | 0.3s, 300ms | | transition-timing-function | Хурдны муруй | ease, linear | | transition-delay | Хойшлуулах | 0s, 0.1s |

transition-property

css

/* Нэг property */
.btn {
  transition-property: background-color;
}

/* Олон property */
.btn {
  transition-property: background-color, transform, box-shadow;
}

/* Бүх property — болгоомжтой ашиглах */
.btn {
  transition-property: all;
}

transition-duration

css

.fast {
  transition-duration: 0.1s;
} /* маш хурдан */
.normal {
  transition-duration: 0.2s;
} /* нийтлэг UI */
.slow {
  transition-duration: 0.5s;
} /* удаан */
.panel {
  transition-duration: 300ms;
} /* ms-ээр бичиж болно */

transition-timing-function — хурдны муруй

css

.a {
  transition-timing-function: ease;
} /* удаан эхлэж, хурдасч, удаан дуусна (анхдагч) */
.b {
  transition-timing-function: linear;
} /* тогтмол хурдтай */
.c {
  transition-timing-function: ease-in;
} /* аажмаар эхэлнэ */
.d {
  transition-timing-function: ease-out;
} /* аажмаар дуусна */
.e {
  transition-timing-function: ease-in-out;
} /* хоёр талдаа аажмаар */
.f {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
} /* харайх эффект */

Хамгийн нийтлэг хэрэглэгддэг:

ease — ерөнхий UI (анхдагч)
ease-out — хаалт, унах эффект
ease-in-out — нэг байрнаас нөгөөд шилжих

transition-delay

css

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease 0.5s; /* 0.5s хүлээгээд гарна */
}

/* Олон элементийг дараалан */
.item:nth-child(1) {
  transition-delay: 0s;
}
.item:nth-child(2) {
  transition-delay: 0.05s;
}
.item:nth-child(3) {
  transition-delay: 0.1s;
}
.item:nth-child(4) {
  transition-delay: 0.15s;
}

Shorthand — товчилсон бичлэг

css

/* transition: property duration timing delay */
.btn {
  transition: background-color 0.2s ease;
  transition: all 0.3s ease-in-out 0s;
}

/* Олон property — таслалаар тусгаарлана */
.card {
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out,
    border-color 0.15s ease;
}

Hover жишээнүүд

Товч — hover эффект:

css

.btn {
  background: #7c3aed;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover {
  background: #6d28d9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

Card — hover дээр өргөх:

css

.card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
  transition:
    transform 0.2s ease-out,
    border-color 0.2s ease,
    box-shadow 0.2s ease-out;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #a78bfa;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

Navigation link — underline эффект:

css

.nav-link {
  position: relative;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0; /* анхдагч: зураас байхгүй */
  height: 2px;
  background: #a78bfa;
  transition: width 0.25s ease-out; /* зураас гарч ирэх */
}

.nav-link:hover {
  color: #f1f5f9;
}

.nav-link:hover::after {
  width: 100%; /* зураас бүрэн гарна */
}

Input — focus эффект:

css

.input {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 10px 14px;
  color: #f1f5f9;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

Transition хэрэглэхгүй байх тохиолдол

css

/* display: none → block шилжилт transition хийгддэггүй */
.dropdown {
  display: none;
}
.dropdown.open {
  display: block;
} /* transition ажиллахгүй */

/* Оронд нь opacity ба visibility ашиглах */
.dropdown {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.dropdown.open {
  opacity: 1;
  visibility: visible;
}

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

@keyframes ба animation property-г судална. Transition нь A→B шилжилт хийдэг бол Animation нь олон алхамтай, давтагдах, илүү нарийн хөдөлгөөн хийх боломжийг олгоно.

← Өмнөх хичээлӨвлөлт (inheritance)Дараах хичээл →Animation ба keyframe