Question

我有一个带有两个不同动画的svg；一个公文包跳起来，还有一些速度线。我想发生的是，将鼠标悬停在上面时会播放动画。问题是您必须将鼠标悬停在实体部分而不是整个对象上。我不希望外环移动，所以不能将动画应用于整个过程。

对于只有一个动画的SVG，我使用了不透明度为零的圆使其起作用。这不适用于多个动画。

  /* Animation Code */

  .case:hover {
  animation: jump 1.5s linear infinite;
  position:relative;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  transform-origin: 50% 50%;
  }

@keyframes jump{
0% {transform: translate(0,0) ;}
30% {transform: translate(0,-10%) ;}
100% {transform: translate(0,0) ;}
}

.lines:hover {
      animation: woosh 1.5s linear infinite;
  position:relative;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  transform-origin: 50% 75%;
}

    @keyframes woosh{

0%, 5% {
    transform: scaleY(0);
}

30% {
    transform: scaleY(-1);
    opacity: 0.3;
}
55% {

    opacity: 0;
}

100% {
    transform: scaleY(-1);
    opacity: 0;
}

}

https://jsfiddle.net/paulmadsenbe/tj7q5sgp/

Answer 1

如果将两个动画对象都放在父容器中，然后使用container:hover .case和container:hover .lines，则可以一起触发它们。这是对您的提琴的修改：https://jsfiddle.net/3kewaL9r/

有没有办法在悬停时同时运行多个CSS动画？

1 个答案: