Leave a comment

Rotating tires with CSS3


The tires of the car need to rotate when the car is driven into the garage.
This is a good candidate for css3 animations.

At first I thought about a simple rotation of a sprite. However, in the original game the rotating tyre has 2 states but the image isn’t rotated.
The rotation effect is done with 2 alternating images. These 2 images are combined in 1 sprite, see below.

Normal tyre.

Tyre (brand name).

Now, to create the effect of a rotating tyre we alternate the background position for a given time (the time it takes to drive the car in the garage).
See the comments in the css code below for an explanation.

/* The tyre is absolutely positioned relative to the car. When the car moves, the tires move in the same direction as the car. */
.garage .car .tyre {
  position: absolute;
  width: 66px;
  height: 54px;
  bottom: 2px;
  background-image: url(/car/tyre.png); /* The server generates the tyre image. (changing tires by changing values (hacking) on the clientside is not possible) */
}

/*
  When the car is driven into the garage an extra css class (drive-in-garage) is set on the car. 
  The tires only need the rotation animation when this class is set.
 */
.garage .drive-in-garage .tyre {
  /*
    Use the keyframes of rotate-tyre.    
    Every 0.2 seconds take 1 step (1 entry in rotate-tyre).
    Do this 7 times. (The total duration of the animation is 7 * 0.2s = 1.4s)
  */
  animation: rotate-tyre 0.2s steps(1) 7;
}

@keyframes rotate-tyre {
  0% {
    /* Show first image in sprite. */
    background-position: 0 0;
  }
  25% {
    /* Show second image in sprite. */
    background-position: -66px 0;
  }
  50% {
    background-position: 0 0;
  }
  75% {
    background-position: -66px 0;
  }
  100% {
    background-position: 0 0;
  }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: