动画元素上的 CSS 悬停变换

Question

我正在尝试对:hover 执行简单的 CSS 转换 — 这通常显然是一项简单的任务，但我正在尝试在动画 div 元素上执行此操作。使用@keyframes{} 的简单 CSS 动画在 Y 轴上无限动画化该元素，但是当我尝试将鼠标悬停在该元素上时没有任何反应。

如果我在悬停代码上使用!important，我可以将其完成种类的工作，但转换/缩放会立即发生，而不是使用我应用的 300 毫秒 transition 属性到.box 类。

我是否遗漏了一些明显的东西，或者这不可能？本质上，我只希望元素使用transition 效果和时间在悬停时缩放，然后在未悬停时恢复它的原始动画。谢谢

.box {
  width: 50%;
  border: solid 3px #555;
  animation: box-move 1s infinite alternate-reverse;
  transition: transform 300ms;
}

.box:hover {
  transform: scale(1.2);
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

<div class="box">I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div>

Answer 1

因为您在悬停和动画中都使用了变换属性。 试试这个。

.box {
  width: 50%;
  border: solid 3px #555;
  animation: box-move 1s infinite alternate-reverse;
  transition: transform 300ms;
}

.box:hover {
  animation: box-move-anim 1s infinite alternate-reverse;
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
@keyframes box-move-anim {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-5px) scale(1.2);
  }
}

Answer 2

考虑另一个包装器：

.box {
  width: 50%;
  animation: box-move 1s infinite alternate-reverse;
}
.box> div {
  border: solid 3px #555;
  transition: transform 300ms;
  transform-origin:top left;
}

.box:hover > div {
  transform: scale(1.2);
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

<div class="box"><div>I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div></div>

Answer 3

好的，感谢您的聪明而有用的建议，我设法找到了一个令人满意的解决方案。对我来说，关键是在:hover 上使用设置为forwards 的animation-direction 属性。我无法真正解释为什么会这样，但我只知道没有它就无法正常工作。

理想情况下，我仍然希望缩小（悬停）与缩小（目前只是回弹）一样平滑，但这将满足我的需要。

再次感谢。

.box {
  width: 50%;
  margin: 1em auto 0 auto;
  border: solid 3px #555;
  cursor: pointer;
  animation: box-move 1s infinite alternate-reverse;
}

.box:hover {
  animation: box-move-anim 300ms 1 forwards;
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes box-move-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

<div class="box">I'm a box that animates up and down, but I now smoothly scale when hovered :)</div>