如何在视图上为 SVG 设置一次动画，然后在每次悬停时设置动画？

Question

我在一个 div 上有这个动画。我想要的是当页面加载时，它应该动画一次。当我将鼠标悬停在它上面时，它应该再次动画。

动画在悬停或加载时效果很好。但是当我尝试两种方式（如我的示例中）时，它不起作用。为什么它不起作用？

我也尝试过在悬停时再次定义动画，而不是只输入animation-play-state: running，但这也不起作用。当我在 chrome 开发工具中查看它并强制将鼠标悬停在 box 元素上时，我可以看到选择器在那里，但动画什么也没做。

同样令人好奇的是，当我使用animation: test 1s infinite; 将悬停动画设置为无限时，它就可以工作了。当我希望它运行一次时它就不起作用了。

@keyframes test {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  80% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  width: 300px;
  height: 300px;
  background-color: black;
  display: block;
  animation: test 1s;
}

.box:hover {
  animation: test 1s;
}

<div class="box"></div>

Answer 1

虽然可能不满意，但您可以通过复制动画来获得结果：

@keyframes test {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  80% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes copytest {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  80% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  width: 300px;
  height: 300px;
  background-color: black;
  display: block;
  animation: test 1s;
}

.box:hover {
  animation: copytest 1s;
}

<div class="box"></div>

Answer 2

有一个解决方案，我几乎没有编辑过你的 CSS 代码，我将“动画”代码与“动画名称：测试”和“动画持续时间：1s”分开，但你也可以只在“动画”参数中使用它同样，这不是问题，问题是您使用了一个动画名称来悬停和块的正常位置，您应该使用2个名称和2个关键帧

代码如下：

  .box {
    width: 300px;
    height: 300px;
    background-color: black;
    display: block;
    animation-name: test-primary;
    animation-duration: 1s;
  }
  
  .box:hover {
    animation-name: test-secondary;
    animation-duration: 1s;
  }
@keyframes test-primary {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    80% { transform: scale(0.85); }
    100% {transform: scale(1);
    }
  }
  
  @keyframes test-secondary {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    80% { transform: scale(0.85); }
    100% {transform: scale(1);
    }
  }

这行得通，试试这个变种我希望对你有帮助:)

Answer 3

您可以稍后依靠过渡来模拟相同的动画效果。我依靠cubic-bezier() 来创建这样的效果，我邀请您阅读我的文章以了解它是如何工作的：https://css-tricks.com/advanced-css-animation-using-cubic-bezier/

@keyframes test {
  25% {
    transform: scale(1.25);
  }
  80% {
    transform: scale(0.85);
  }
}

.box {
  width: 300px;
  height: 300px;
  background-color: black;
  display: block;
  animation: test 1s;
}

.box:hover {
  transform:scale(1.02);
  transition:1s cubic-bezier(0.5,50,0.5,-50);
}

<div class="box"></div>