当我用关键帧制作另一个动画时，为什么我不能为 scali 制作动画？

Question

我想要一张图片滑动（带关键帧），wen :hover 它的比例增大，当 :active 时，减小它的比例。当我这样做时，它只会滑动，: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">

Answer 1

这是因为您的关键帧动画正在使用 css transform 属性和 css 悬停也使用 transform 缩放图像.因此，一次只能使用其中一个。

作为此问题的解决方法，您可以使用位置动画化图像条目。

将 position:relative 添加到 #slide-right 并将关键帧更新为 0%{left:0} 和 100%{left:200px}。

工作示例请参考：this

Answer 2

#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">

当我用关键帧制作另一个动画时，为什么我不能为 scali 制作动画？

Why can´t i animate the scali when i make another animation with keyframes?

html

css

hover

keyframe

css-animations