Почему я не могу оживить scali, когда я делаю другую анимацию с ключевыми кадрами?

Я хочу, чтобы картинка скользила (с ключевыми кадрами), и wen:hover, чтобы ее масштаб увеличивался, а когда: активный, уменьшал ее масштаб. Когда я это делаю, он только скользит,:hover и:active не работают... Пожалуйста, помогите

#slide-right {
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  height: 250px;
  box-shadow: 0px 1px 5px grey;
  border-radius: 10px;
  transition: .5s;
 animation: slide-right 1s ease-out both;
}

#slide-right:hover {
  transition: .5s;
  transform: scale(1.04);
}

#slide-right:active {
  transition: .2s;
  transform: scale(0.95);
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(+200px);
  }
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">

Источник

2 ответа

Решение

Это происходит потому, что ваша ключевая анимация использует CSS transform Свойство и CSS для наведения также использует transform масштабировать изображение. Таким образом, только один из них будет работать одновременно.

В качестве обходного пути для этой проблемы вы можете анимировать ввод изображения с помощью позиции.

добавлять position:relative в #slide-right и обновите ваши ключевые кадры до 0%{left:0} а также 100%{left:200px},

Для рабочего примера, пожалуйста, обратитесь: это

Источник 

#slide-right {
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  height: 250px;
  box-shadow: 0px 1px 5px grey;
  border-radius: 10px;
  transition: .5s;
 animation: slide-right 1s ease-out forwards;
}


@keyframes slide-right{
  0% {
    left: 0px;
  }
  100% {
    left: 200px;
  }
}

#slide-right:hover {
  transition: .5s;
  transform: scale(1.04);
}

#slide-right:active {
  transition: .2s;
  transform: scale(0.95);
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">

Источник
Другие вопросы по тегам