JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="child">
        <i class="fa fa-video-camera spin" style="font-size:22px;"></i>
    </div>

CSS

.child{
    margin-top:20px;
    margin-left:20px;
}

.child:hover .spin{
  -webkit-animation: spin 0.2s linear;
  -moz-animation: spin 0.2s linear;
  -o-animation: spin 0.2s linear;
  animation: spin 0.2s linear;

}

@-moz-keyframes spin {
  from {

    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}