Как исправить дергающийся hover со scale?

Question

Как исправить дергающийся hover со scale?

Рейтинг: 0Ответов: 1Опубликовано: 31.03.2023

При наведении на объект все нормально, но когда мышка убирается с объекта, он начинает дергаться при возвращении в исходное положение.

.carAdvert {
  transition: transform 1s;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  border: 1px solid transparent;
}

.carAdvert:hover {
  transform-origin: left bottom;
  transform: scale(1.1);
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  border: 1px solid transparent;
}

<div class="container" style="padding-top:50px">
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <button class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Эконом и Комфорт класс</a></button>
  </div>
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <div class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Минивен</a></div>
  </div>
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <div class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Трезвый водитель</a></div>
  </div>
</div>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Ещё бы :), вы же резко меняете у него transform-origin, само свойство по странданту должно быть в элементе, так всё должно заработать корректно.

.carAdvert {
  transition: transform 1s;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  border: 1px solid transparent;
  transform-origin: left bottom;
}

.carAdvert:hover {
  transform: scale(1.1);
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  border: 1px solid transparent;
}

<div class="container" style="padding-top:50px">
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <button class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Эконом и Комфорт класс</a></button>
  </div>
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <div class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Минивен</a></div>
  </div>
  <div class="carAdvert row justify-content-md-start">
    <div class="col-md-auto" style="width:auto;"><img src="/img/carIco.png" style="width:100px; height:auto;"></div>
    <div class="col-md-auto carAdvertText"><a asp-area="" asp-controller="Home" asp-action="Privacy">Трезвый водитель</a></div>
  </div>
</div>

Как исправить дергающийся hover со scale?

Ответы