Chevron icon will not bounce - CSS 3 Animation

Asked Mar 03 '18 at 20:34

Active Mar 03 '18 at 20:34

Viewed 270 times

I'm trying to make the chevron down arrow to bounce within the blue circle. I'm using CSS3 animation from W3schools, not Animation.css. Using 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

asked Mar 03 '18 at 20:34

hnewbie

https://stackoverflow.com/questions/18071046/smooth-scroll-to-specific-div-on-click?lq=1 – Syed Muhammad Munis Ali Mar 03 '18 at 20:37
You need to add a closing bracket before your animations. – sol Mar 03 '18 at 20:45
You can't do nested style in plain css, move @keyframes out of the parent brackets, it will work. – Stickers Mar 03 '18 at 20:45
ooooooooohhhhhhh. okay. Thank you Stickers! – hnewbie Mar 03 '18 at 20:50

Chevron icon will not bounce - CSS 3 Animation

0 Answers0