2

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

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

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

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

3
  • Вас сложно понять, вы имели в виду, что вам нужно объединить transform-свойство? Если да, то вот transform: translate(-20%, -20%) scale(1,5); 12 ноя 2021 в 21:17
  • Нет, так нельзя разделить, так как и translate и scale - это значения одного свойства transform, а transition взаимодействует именно с разными свойствами, но не с их значениями. Решения два: использовать TRBL, вместо translate или создать дополнительный блок-обёртку и выровнять его без transition.
    – UModeL
    13 ноя 2021 в 0:37
  • 1
    @UModel спасибо 13 ноя 2021 в 0:43

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.