title: Getting SVG elements to animate when hovering over a different element using keyframes
body: <p>I'm having trouble animating elements of the SVG using keyframes. I want to animate sections of the SVG at different rates when hovering over a separate link.
  If I remove the <code>#enter:hover</code> it animates the kernels correctly continuously, I just want it to animate when I hover over the <code>enter</code> link. </p>
  
  <p>Can someone please guide me in the right direction? </p>
  
  <p>It's a pretty long SVG file so I didn't include portions of it (the portions I am not animating). </p>
  
  <p><strong>CSS</strong>
  </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
    &lt;head&gt; 
      &lt;meta charset='utf-8' /&gt;
      &lt;link rel='stylesheet' href='normalize.css'/&gt;
      &lt;link rel="stylesheet" href="main.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1 class="splash"&gt;
        &lt;a id="enter" href="home.html"&gt; Kernel &lt;/a&gt;
      &lt;/h1&gt;
      &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
      &lt;div class="svg"&gt;
        &lt;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"&gt;
          &lt;defs
                id="defs4" /&gt;
          &lt;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" /&gt;
          &lt;metadata
                    id="metadata7"&gt;
            &lt;rdf:RDF&gt;
              &lt;cc:Work
                       rdf:about=""&gt;
                &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
                &lt;dc:type
                         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
                &lt;dc:title /&gt;
              &lt;/cc:Work&gt;
            &lt;/rdf:RDF&gt;
          &lt;/metadata&gt;
          &lt;g
             inkscape:groupmode="layer"
             id="layer8"
             inkscape:label="base 1"
             style="display:inline"&gt;
            &lt;g class="kernel5"
               inkscape:groupmode="layer"
               id="layer9"
               inkscape:label="kernel5"
               style="display:inline;opacity:1"&gt;
              &lt;path id="kernel5" 
                    ..../&gt;
              &lt;path id="kernel5" 
                    ..../&gt;
              &lt;path id="kernel5" 
                    ..../&gt;
            &lt;/g&gt;
            &lt;g class="kernel3"
               inkscape:groupmode="layer"
               id="layer6"
               inkscape:label="kernel3"
               style="display:inline"&gt;
              &lt;path id="kernel3"
                    ..../&gt; 
              &lt;path id="kernel3"
                    ..../&gt; 
              &lt;path id="kernel3"
                    ..../&gt;
            &lt;/g&gt;
            &lt;g class="kernel4"
               inkscape:groupmode="layer"
               id="layer7"
               inkscape:label="kernel4"
               style="display:inline"&gt;
              &lt;path id="kernel4"
                    ..../&gt; 
              &lt;path id="kernel4"
                    ..../&gt; 
              &lt;path id="kernel4"
                    ..../&gt; 
              &lt;g class="kernel2"
                 inkscape:groupmode="layer"
                 id="layer5"
                 inkscape:label="kernel2"
                 style="display:inline"&gt;
                &lt;path id="kernel2"
                      ...../&gt; 
                &lt;path id="kernel2"
                      ...../&gt; 
                &lt;path id="kernel2"
                      ...../&gt; 
              &lt;/g&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>