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)
}

如果元素以前未进行过变换，则:hover动作上的变换效果很好（请参见初始动画“图像动画”），但在上述情况下不起作用。

是否可以使用transform: scale(...)制作初始动画，固定比例参数，然后在悬停时应用``transform：scale（...）`？

Answer 1

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

要将比例保持在0.7： idk是错别字还是错误，但应该是

animation-fill-mode: forwards;

（您缺少's'）

要将“ transform：scale（...）”应用于悬停：您只需要添加'animation：0;'到'：hover'：

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：：，但是只会缩放颜色。如果该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>

转换已缩放的元素

1 个答案: