雪佛龙图标不会反弹 - CSS 3动画

Question

我正试图让V形箭头向下箭头在蓝色圆圈内反弹。我正在使用W3schools的CSS3动画，而不是Animation.css。使用Chrome。

HTML：

<div class="blkcircles w3-center" id="go_down" onclick="smoothScroll(document.getElementById('second'))"> <i class="fa fa-angle-double-down" id="downchevron"></i><span></span></div>

CSS：

.blkcircles{
  height: 75px;
  width: 75px;
  border-radius: 100%;
  background: #81A4CD;
  position: absolute;
  top: 50px;
  right: 40px;
}

#downchevron{
  /*height: 100px;
  width: 100px;*/
  margin: 10px auto; 
  color: white; 
  font-size: 60px;
  animation-duration: 1s;
  animation-name: bounce;
  animation-iteration-count: infinite;

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes bounce {
   from {transform: translateY(0px);}
   to {transform: translateY(-15px);}
  }

  /* Standard syntax */
  @keyframes bounce {
   from {transform: translateY(0px);}
   to {transform: translateY(-15px);}
  }
} 

The Codepen