CSS Animation Demo

Hover over the ball and it will move.

by javajosh

HTML

<p>What should happen: the ball should animate when you hover over it.</p>
<p>What does happen: nothing.</p>
<p>Reference: <a href="http://learn.shayhowe.com/advanced-html-css/transitions-animations#animations">Shay Howe's excellent tutorial.</a></p>

<div class="stage">
    <figure class="ball"></figure>
</div>

CSS

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 105px;
    top: 100px;
  }
  100% {
    left: 210px;
    top: 0;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}

.ball {
    position: absolute; width:50px; height: 50px;
    border-radius:50%; background-color:green;}