CSS3 Animation Example

Back to postAnimation With CSS: It's Easier Than You Think

@keyframes fly {
  0% {
    bottom: 250px;
    left: 100px;
    transform: scale(0.05);
  }
	
  15% {
    bottom: 215px;
    left: -100px;
    transform: scale(0.3);
  }
	
  25% {
    bottom: 175px;
    left: 145px;
    transform: scale(0.2);
  }
	
  40% {
    bottom: 160px;
    left: 315px;
    transform: scale(0.7);
  }
		
  75% {
    bottom: 150px;
    left: 495px;
    transform: scale(1.8);
  }

  80% {
    bottom: 140px;
    left: 475px;
    transform: scale(2.0);
  }

  90% {
    bottom: 150px;
    left: 455px;
    transform: scale(2.0);
  }

  100% {
    bottom: 145px;
    left: 425px;
    transform: scale(2.0);
  }
}

	
animation-name: fly;
animation-duration: 20s;
animation-play-state: running;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
	
The animation above, while admittedly cheesy is to show the
relative simplicity in creating animations with css3.

The animation properties directly above are set on the "flying saucer"
object. Their names should give away what they do. The first
(animation-name) tells the "spaceship" to use the @keyframes rule
to the right.

Most of the time spent working on the animation was in adding
additional keyframes to smooth things out a little and adjusting
the various properties.

The animation will play in Safari, Chrome, and Firefox, though
it plays a little choppy in Firefox.

While I didn't show them here, vendor prefixes (-webkit and -moz)
are necessary for the animation to work.

The animation-timing-function could have been set on the keyframes
instead of the object in order to vary them between keyframes. Since
I used linear throughout, I added them to the object instead.

The "from" and "to" keywords could have been used for keyframes 0%
and 100% respectively.