时间戳

首页 > 解决方案 > 如何在视图上为 SVG 设置一次动画，然后在每次悬停时设置动画？

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

问题描述

我在 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>

标签： htmlcsssvgcss-animations

解决方案

您可以稍后依靠过渡来模拟动画的相同效果。我依靠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>

推荐阅读