incremental animation

by jpeter06

HTML

<div id="cube">
A
</div>
<div id="cube2">

</div>

CSS

#cube2{
  display:block;
  position:absolute;
  top:100px;
  left:300px;
  width:50px;
  height:50px;
  background:blue;
}

#cube{
  display:block;
  position:absolute;
  top:100px;
  left:100px;
  width:50px;
  height:50px;
  background:red;
}

#cube:hover{
   animation-name: spin2;
}
#cube{
  animation-name: spin;
  animation-duration: 11s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: animation-duration 3s;
}
@keyframes spin2 {   100%  {    transform: rotate(720deg);       }    }
@keyframes spin {   100%  {    transform: rotate(360deg);       }    }