css - 变换已经缩放的元素

Question

我试图在悬停时缩放已经缩放的元素。

最初，我正在运行一个动画

animation-name: image-animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forward;
animation-timing-function: ease-out;

@keyframes image-animation {
  to {
      top: -28%;
      transform: scale(.7);
      }
  }

然后我想在悬停时缩放相同的元素:

:hover {
transform: scale(1.1)
}

Transform on :hover 如果元素之前没有被转换(参见初始动画“image-animation”)，则 Action 效果很好，但在上述情况下不起作用。

是否可以使用 transform: scale(...) 制作初始动画，修复缩放参数，然后在悬停时应用 ``transform: scale(...)`？

Answer 1

是的，这是可能的。它不起作用的原因是您无法更改悬停时正在动画的属性。

要将比例保持在 0.7: idk 如果它是错字或错误，但它应该是

animation-fill-mode: forwards;

(你漏掉了's')

在悬停时应用'transform: scale(...)': 您只需要添加“动画:0；”到':悬停':

html, body {
  margin: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 800px;
  animation-name: image-animation;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: top center;
  background: green;
}
@keyframes image-animation {
  to {
    transform: scale(0.7);
  }
}

.container:hover{
  animation: 0;
  transform: scale(1.1);
}

<div class="container">
</div>

但是，您的比例仍然基于原始大小，并且由于动画属性发生变化，您将鼠标悬停后动画重新开始。

另外，你不能在同一个属性上有一个过渡和一个动画，所以如果你想让它更流畅，应该是两个不同的动画。

但即使你这样做了，因为你的第一个动画有延迟，在悬停之后，它从 scale(1.1) 到 scale(1)，等待 1s，然后再次开始动画。 没有延迟 imo 看起来更好，但是如果你只需要在动画第一次运行时延迟，有一些选项，但我需要更多关于其余代码的细节才能找到合适的解决方法。

编辑:根据您的需要，您可以使用 am :after element scale，但它只会缩放颜色。如果该 div 有子元素，那么您可以添加另一个包含这些子元素并且可以在其上使用 transform(scale) 和 transition 的子元素。

html, body {
  margin: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 800px;
  animation-name: image-animation;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: top center;
}
@keyframes image-animation {
  to {
    transform: scale(0.7);
  }
}
.content {
  width: 800px;
  height: 800px;
  background-color: green;
  transition: 0.5s all ease-in;
  transform-origin: top center;
}
.content:hover {
  transform: scale(1.1);
}

<div class="container">
  <div class="content">
    some text
  </div>
</div>