title: I want hover animation to be played only during non-selected nav links
body: <p>Here's a link to my codepen: <a href="http://codepen.io/Chiz/pen/LpRQeY" rel="nofollow">http://codepen.io/Chiz/pen/LpRQeY</a></p>
  
  <p>Here's the embeded code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-default .navbar-nav &gt; li.active a,
  .navbar-default .navbar-nav &gt; .active,
  .navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; .active &gt; a:link,
  .navbar-default .navbar-nav &gt; .active &gt; a:visited,
  .navbar-default .navbar-nav &gt; .active &gt; a:hover,
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
    color: white;
    background-color: rgba(74, 74, 74, 1.00);
  }
  @-webkit-keyframes greenPulse {
    from {
      background-color: #749a02;
      -webkit-box-shadow: 0 0 9px #333;
    }
    50% {
      background-color: #91bd09;
      -webkit-box-shadow: 0 0 18px #91bd09;
    }
    to {
      background-color: #749a02;
      -webkit-box-shadow: 0 0 9px #333;
    }
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
    background-color: rgba(230, 230, 230, 1.00);
    -webkit-animation-name: greenPulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
  }
  /* make width of all nav link boxes the same */
  
  .nav li {
    float: left;
    width: 10em;
  }
  .nav li a:link {
    display: block;
    width: 100%;
    text-align: center;
  }
  /* arrow pointer for selected nav bar tab by using CSS triangle trick */
  
  .navbar-default .navbar-nav &gt; li.active {
    position: relative;
  }
  .navbar-default .navbar-nav &gt; li.active:after {
    /* http://stackoverflow.com/questions/7073484/how-do-css-triangles-work */
    border-color: transparent transparent rgba(74, 74, 74, 1.00) transparent;
    border-style: solid;
    border-width: 15px 15px 30px 15px;
    content: "";
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 0;
    width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;nav class="navbar navbar-default navbar-fixed-bottom"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="#"&gt;MySiteLogo&lt;/a&gt;
     &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="active"&gt;&lt;a href="#" data-toggle="tab"&gt;Me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;Web&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;Print&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;Art / 3D&lt;/a&gt;&lt;/li&gt; 
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hover over the 4 links on the right. Everything works fine, except for 1 issue.
  The link that is selected (the "Me" link") should NOT have the hover effect applied to it. The hover effect should be applied only onto non-selected nav links.</p>
  
  <p>I think the problem is that "<strong>@-webkit-keyframes</strong>" section. It's being applied globally through the site. I tried putting it inside the "<strong>.navbar-default .navbar-nav > li > a:hover</strong>" section but obviously, it's invalid syntax.</p>
  
  <p>Tks!</p>