Html 使用关键帧在不同元素上悬停时获取SVG元素动画

我无法使用关键帧设置SVG元素的动画。我想在将鼠标悬停在单独的链接上时，以不同的速率为SVG的各个部分设置动画。 如果我删除

#enter:hover

它会连续正确地为内核设置动画，我只希望它在我将鼠标悬停在

enter

链接上时设置动画

有人能给我指路吗

这是一个相当长的SVG文件，所以我没有包括其中的部分（我没有设置动画的部分）

CSS

HTML

image/svg+xml

原因 问题在于标记结构（HTML）和用于将动画应用于元素的选择器。您正在使用的选择器（例如，

#enter:hover.kernel2

）指示UA执行以下操作：

• 当使用

  id='enter'

  的元素悬停时，选择作为其子体且具有

  类='kernel2

  的元素。后代只不过是孩子和孙子孙女

您的HTML:（仅限于相关部分）

下面是一个示例SVG和动画的演示，供您参考

svg{
宽度：30px；
浮动：对；
}
#进入{
显示：块；
浮动：左；
}
@关键帧pop2{
0% {
变换：translateY（0px）；
}
10% {
转换：translateY（-50px）；
}
20% {
转换：translateY（-100px）；
}
30% {
转换：translateY（-125px）；
}
40% {
转换：translateY（-150px）；
}
50% {
转换：translateY（-200px）；
不透明度：0.75；
}
70% {
transform:translateY（-100）；
}
100% {
不透明度：0.5；
变换：translateY（100px）；
}
}
#输入：hover.kernel2{
转型：转型4s；
变换原点：中心；
动画：pop2 1s 1s无限轻松；
}

---

这很有道理，效果很好。非常感谢。

svg{
  width:30%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  display:block;
  margin-top:none;
  padding-top: none;
  float:right;
}
#enter{
  color: #fff;
  text-decoration: none;
  font-size:300px;
  text-align: center;
  font-family: "monthoers", "Helvetica-nue", Verdana, serif;
  font-weight:110;
  margin-bottom: none;
  display:block;
  float:left;
  margin-top: 300px;
} 
.splash{
  text-align:center;
  margin-top: 100px;
  margin-bottom: none;
}

@keyframes pop1{
  0% {transform: translateY(0px);}
  10% {transform: translateY(-100px);
  }
  20% {transform: translateY(-200px);
  }
  30% {transform: translateY(-300px);
  }
  40% {transform: translateY(-400px);
  }
  50% {transform: translateY(-500px); 
    opacity:0.75;}
  70%{ transform: translateY(-300); }
  100% {opacity: 0.5;
    transform: translateY(100px);}

} 

@keyframes pop2 {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-50px);
  }
  20% {transform: translateY(-100px);
  }
  30% {transform: translateY(-125px);
  }
  40% {transform: translateY(-150px);
  }
  50% {transform: translateY(-200px); 
    opacity:0.75;}
  70%{ transform: translateY(-100); }
  100% {opacity: 0.5;
    transform: translateY(100px);}  
}
@keyframes pop3 {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-75px);
  }
  20% {transform: translateY(-150px);
  }
  30% {transform: translateY(-225x);
  }
  40% {transform: translateY(-300px);
  }
  50% {transform: translateY(-200px); 
    opacity:0.75;}
  70%{ transform: translateY(-100); }
  100% {opacity: 0.5;
    transform: translateY(100px);}  
}


#enter:hover  .kernel5 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop1 1s infinite ease;
}
#enter:hover .kernel3 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop2 1s infinite ease;
}
#enter:hover .kernel4 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop3 1s infinite ease;
}

#enter:hover .kernel2 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop2 1s 1s infinite ease;
}

<h1 class="splash">
  <a id="enter" href="home.html"> Kernel </a>
</h1>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<div class="svg">
  <svg viewBox='0 0 100 100'>
    <g class="kernel2"> <!-- this is not a descendant of the <a id="enter" -->
      <path id="kernel2" d='M0,0 50,100 100,0' />
    </g>
  </svg>
</div>

<h1 class="splash">
  <a id="enter" href="home.html"> Kernel 
    <svg viewBox='0 0 100 100'>
      <g class="kernel2">
        <path id="kernel2" d='M0,0 50,100 100,0' />
      </g>
    </svg>
  </a>
</h1>