using keyframes with fontawesome

I am trying to add some animation to an fontawesome icon using keyframes. My problem is is that I am not sure how to add the class name in? I tried at the beginning of the FontAwesomeIcon tag but it didn't work as seen below...

I'm guessing it has to do with the fact that the icon itself is enclosed inside brackets but I am not sure a way around this...

HTML

<a className = "scroll" href="#middle-container"><FontAwesomeIcon className="social-icon" icon={faAngleDoubleDown} bounce size = '2x' color = "white"/></a>

CSS

.social-icon {
  margin: 20px 30px;
  animation: iconmove 2s infinite;
}

    @keyframes iconmove {
  from {top: 0px;}
  to {top: 200px;}
}