Как применить transition только к одному свойству?

Question

При наведении на элемент нужно, чтобы к нему применялся

transform: translate(-20%, -20%) без transition

и transform: scale(1.5) с задержкой 0.3s

как-то можно отделить их?

Answer 1

можно отделить их?

Можно отделить, если вместо transition использовать animation. Только в вашем конкретном примере нужно учитывать, что translate элемента по ховеру может сдвинуть его из-под курсора мыши, и тем самым, действие hover прекратится или зациклится. (Варианты с js не предлагаю.)

.item:hover {
  animation: hover 0.6s forwards;
}

@keyframes hover {
  0% {
    transform: translate(-20%, -20%)
  }
  50% {
    transform: translate(-20%, -20%) /* через 0.3s начинается анимация scale */
  }
  100% {
    transform: translate(-20%, -20%) scale(1.5)
  }
}

.item {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50px;
  left: 50px;
  transform-origin: top left;
}

<div class="item"></div>

БЛОГ НА HUSL

Как применить transition только к одному свойству?

Ответы (1 шт):