CSS3 Animation & Cool Usages

GearRotating GearLady Bug

Remember those repeating animated GIFs that you may have unfortunately seen on web pages a long time ago that looked cool at first then turned to down right annoying after a short period of time? Well we don't see much of them anymore thanks to good designers who realized that those animated GIFs were just plain bad and brought no value to the user experience. But that's not to say all animated graphics are bad as, if done correctly, they can produce a nice intended effect like drawing attention to the viewer, demonstrating how a product works or just producing a nice subtle moving background image for infographics or web pages. For example, this page's title sliding up at the beginning and the spinning gear at top right are nice animations created by CSS3. And by the time you have read to this line, a lady bug should have already creeped up on top the word "COOL" in the title. Click on her to see what happens. Again, these animated effects are created by CSS3.

CSS3 animation is now compatible with almost all modern web browsers () and comes with many benefits (Figure 1) so there is no reason not to use it. There are practically infinite ways to do CSS3 animation but that doesn't mean you have to use it as...with great power comes great responsibility . Designers should still be be aware that CSS3 animation can be as annoying as animated GIF in the past if not done right.

  CSS3 Animation Animated GIF
3D animation
Smaller file size
Compatible with most browsers
Can use in email and banner ads
Easy to make changes to animation
Smooth animation at low bandwidth
Can animate SVG images and sprites
Figure 1: Benefits comparison between CSS3 Animation vs Animated GIF

I hope by now you can see the benefits of using CSS3 animation over animated GIF. But in order to understand how those really cool CSS3 animations on the web work, we must be familiar with them first. Below are some examples of CSS3 animation to whet your appetite. The middle column contains the CSS codes responsible for the animation.

CSS3 Animation Examples

Basic Examples

The soccer ball can be made to move in any direction. In this case the move motion is to the right.
img.ball1 {
  animation: moveball 5s infinite;
  position: relative;
}
@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
The soccer ball can be made to rotate in X, Y or Z-axis. In this case the rotate motion is 360 degree clockwise in Z-axis.
img.ball2 {
  animation: rotateball 5s linear infinite;
}
@keyframes rotateball {
  100% {transform:rotateZ(360deg);}
}
The soccer ball can be made to shrink or grow. In this case it is made to shrink down to half its size.
img.ball3 {
  animation: shrinkball 5s infinite;
}
@keyframes shrinkball {
  100% {transform:scale(0.5,0.5);}
}


Advanced Examples

By combining the move and rotate animation, a more natural rolling ball motion is produced.
img.ball4 {
  animation: roateball4 5s ease-out infinite, moveball4 5s ease-out infinite;
  position: relative;
  transition: all 1s ease-out;
}
@keyframes roateball4 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes moveball4 {
  0%   { left: 0; }
  100% { left: 100px; }
}
Another technique used to produce the bouncing ball effect.
img.ball5 {
  animation: bounceball 1s ease-out 0 alternate none running;
  animation-iteration-count: infinite;
  bottom: 0;
  height: 50px;
  left: 12px;
  position: relative;
  width: 50px;
}
 @keyframes bounceball {
  from { bottom: 0; height: 20px; }
  10%  { bottom: 0; height: 50px;}
  20%  { bottom: 10%}
  to   { bottom: 50%;}
}
CSS3 animation can do it in 3D also! Here is an example of a spinning cube.
div.cube-wrapper {
  display: block;
  height: 50px;
  left: 24px;
  padding: 0;
  perspective: 1000px;
  position: relative;
  top: 0;
  width: 50px;
}
div.cube {
  animation: 6s spin linear infinite;
  border: none !important;
  height: 50px;
  position: absolute;
  transform-style: preserve-3d;
  width: 50px;
}
div.cube * {
  background-color: #000;
  border: 1px solid #fff;
  display: block;
  height: 50px;
  padding: 0 !important;
  position: absolute;
  width: 50px;
}
div.cube *:before {
  background-color: #000;
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}
div.back {
  transform: rotateX(180deg) translateZ(25px);
}
div.bottom {
  transform: rotateX(-90deg) translateZ(25px);
}
div.front {
  transform: rotateY(0deg) translateZ(25px);
}
div.left {
  transform: rotateY(-90deg) translateZ(25px);
}
div.right {
  transform: rotateY(90deg) translateZ(25px);
}
div.top {
  transform: rotateX(90deg) translateZ(25px);
}
@keyframes background {
 to {
 background-size: 50px 50px, 50px 50px;
}
}
@keyframes spin {
 from {
 transform: translateZ(-25px) rotateX(0) rotateY(0deg);
}
 to {
 transform: translateZ(-25px) rotateX(360deg) rotateY(360deg);
}
}
This article is just a teaser to get you excited on the benefits and cool usages of CSS3 animation. Search the web with keywords "CSS3 animation" or "CSS3 3D animation" if you want to learn more, see what creative designers are producing and perhaps create your very own animation using CSS3 for your web pages