使用关键帧将鼠标悬停在不同元素上时获取 SVG 元素动画答案

【问题标题】：Getting SVG elements to animate when hovering over a different element using keyframes使用关键帧将鼠标悬停在不同元素上时获取 SVG 元素动画
【发布时间】：2016-07-31 21:23:21
【问题描述】：

我在使用关键帧为 SVG 元素设置动画时遇到问题。当悬停在单独的链接上时，我想以不同的速率为 SVG 的各个部分设置动画。如果我删除 #enter:hover 它会连续正确地为内核设置动画，我只希望它在我将鼠标悬停在 enter 链接上时进行动画处理。

有人可以指导我正确的方向吗？

这是一个相当长的 SVG 文件，所以我没有包含它的某些部分（我没有制作动画的部分）。

CSS

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;
}

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset='utf-8' />
    <link rel='stylesheet' href='normalize.css'/>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <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
           xmlns:dc="http://purl.org/dc/elements/1.1/"
           xmlns:cc="http://creativecommons.org/ns#"
           xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:svg="http://www.w3.org/2000/svg"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
           width="210mm"
           height="297mm"
           viewBox="0 0 744.09448819 1052.3622047"
           id="svg2"
           version="1.1"
           inkscape:version="0.91 r13725"
           sodipodi:docname="kernels.svg">
        <defs
              id="defs4" />
        <sodipodi:namedview
                            id="base"
                            pagecolor="#ffffff"
                            bordercolor="#666666"
                            borderopacity="1.0"
                            inkscape:pageopacity="0.0"
                            inkscape:pageshadow="2"
                            inkscape:zoom="0.4384062"
                            inkscape:cx="13.604325"
                            inkscape:cy="505.21112"
                            inkscape:document-units="px"
                            inkscape:current-layer="layer9"
                            showgrid="false"
                            inkscape:window-width="1276"
                            inkscape:window-height="756"
                            inkscape:window-x="7"
                            inkscape:window-y="0"
                            inkscape:window-maximized="0" />
        <metadata
                  id="metadata7">
          <rdf:RDF>
            <cc:Work
                     rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title />
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g
           inkscape:groupmode="layer"
           id="layer8"
           inkscape:label="base 1"
           style="display:inline">
          <g class="kernel5"
             inkscape:groupmode="layer"
             id="layer9"
             inkscape:label="kernel5"
             style="display:inline;opacity:1">
            <path id="kernel5" 
                  ..../>
            <path id="kernel5" 
                  ..../>
            <path id="kernel5" 
                  ..../>
          </g>
          <g class="kernel3"
             inkscape:groupmode="layer"
             id="layer6"
             inkscape:label="kernel3"
             style="display:inline">
            <path id="kernel3"
                  ..../> 
            <path id="kernel3"
                  ..../> 
            <path id="kernel3"
                  ..../>
          </g>
          <g class="kernel4"
             inkscape:groupmode="layer"
             id="layer7"
             inkscape:label="kernel4"
             style="display:inline">
            <path id="kernel4"
                  ..../> 
            <path id="kernel4"
                  ..../> 
            <path id="kernel4"
                  ..../> 
            <g class="kernel2"
               inkscape:groupmode="layer"
               id="layer5"
               inkscape:label="kernel2"
               style="display:inline">
              <path id="kernel2"
                    ...../> 
              <path id="kernel2"
                    ...../> 
              <path id="kernel2"
                    ...../> 
            </g>
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css svg css-animations

【解决方案1】：

原因

问题在于标记结构 (HTML) 和用于将动画应用于元素的选择器。您正在使用的选择器（例如，#enter:hover .kernel2）指示 UA 执行以下操作：

当带有id='enter' 的元素悬停时，选择作为其后代且具有class='kernel2 的元素。后代不过是子孙元素。

您的 HTML：（仅简化为相关部分）

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

但是根据标记，带有class='kernel2' 的元素（在svg 内）不是带有id='enter' 的元素的子元素或孙子元素，因此UA 什么都不做。

解决方案

要在带有id='enter' 的元素上悬停时应用动画，您应该更改您的标记，如下所示。在这里，svg 被添加到 <a> 和 </a> 标签中，这使它成为 id='enter' 元素的后代，因此您的动画将被应用。

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

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

svg {
  width: 30px;
  float: right;
}
#enter {
  display: block;
  float: left;
}
@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);
  }
}
#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 
    <svg viewBox='0 0 100 100'>
      <g class="kernel2">
        <path id="kernel2" d='M0,0 50,100 100,0' />
      </g>
    </svg>
  </a>
</h1>

【讨论】：

这很有意义，效果很好。谢谢！