时间戳

首页 > 解决方案 > 动画元素上的 CSS 悬停变换

html - 动画元素上的 CSS 悬停变换

问题描述

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

如果我在悬停代码上使用它，我可以让它工作，但是转换/缩放会立即发生，而不是使用我应用于类的 300ms 属性。!importanttransition.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>

标签： htmlcsscss-animationscss-transforms

解决方案

考虑另一个包装器：

.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>

推荐阅读