CSS3 Animated Owl Tutorial

As with any inquisitive web designer or developer I am always looking for ways to experiment with the latest HTML and CSS source. This past spring I got engaged and set off to create a wedding website, providing me just the opportunity to play with CSS3 transforms, transitions, and animations.

My fiancé loves owls so my idea was to have an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Nope. However, exactly what I was looking to do with CSS3 transforms, transitions, and animations.

View the Demo

CSS3 transforms, transitions, and animations altogether are not yet wildly supported. (Transforms themselves are fairly well supported, transitions are on the rise, and animations are currently only available within webkit browsers.) The idea was to create something that was amusing for users that could view it but something that would not limit the users who could not.

Step 1: The HTML Structure

1
2
3
4
5
6
7
<a id="owl" href="#">
  <img id="rays" src="rays.png" alt="Rays">
  <img id="bod" src="owl.png" alt="Owl">
  <img id="rt" class="wing" src="rt-wing.png" alt="Right Wing">
  <img id="lt" class="wing" src="lt-wing.png" alt="Left Wing">
  <img id="eyes" src="eyes.gif" alt="Eyes">
</a>

The HTML is about straight forward as it gets. An <a> element wrapping several images. The images each have a unique ID and are broken out into the background rays, the owls body, a right wing, a left wing, and then the owls eyes. We will use CSS to position them correctly and add in all of the embellishments. For now, note how they are vertically stacked from the furtherest image back at the top, the rays, to the foremost front image at the bottom, the eyes.

Step 2: Stylizing the Link within CSS

1
2
3
4
5
6
7
8
9
10
11
12
a#owl {
  display: block;
  height: 210px;
  margin: 0 auto;
  position: relative;
  width: 210px;
}

#owl img {
  border: none;
  position: absolute;
}

The CSS starts off with setting the dimensions of the <a> element and setting the position to relative so that we can absolutely position all of the containing images. Since all of the images will be absolutely position we create a default style for all of them as well.

Step 3: Positioning All of the Images with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#owl #eyes {
  left: 81px;
  top: 74px;
}

#owl #lt {
  left: 65px;
  top: 98px;
}

#owl #rt {
  left: 128px;
  top: 98px;
}

#owl #bod {
  left: 70px;
  top: 58px;
}

#owl #rays {
  left: 0;
  top: 0;
}

Easy enough, we set positions for all of the images within the <a> element.

Step 4: Moving the Wings with CSS Transforms & Transitions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#owl #lt {
  left: 65px;
  top: 98px;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
}

#owl #rt {
  left: 128px;
  top: 98px;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}

#owl .wing {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#owl:hover #lt {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

#owl:hover #rt {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

We add a CSS transform property within the links hover attribute so that the wings only change position when the owl is hovered over. Since we want each wing, left and right, to rotate from a different origin we declare the the transform-origin within each individual wings ID. From here the wings will pop up and down, however we want the wings to raise and fall smoothly for a more lively feel. To accomplish this we use the .wing class and create a CSS transition. Within our CSS transition property we set all of the properties to transition at a duration of .4 seconds with a timing function of ease-in-out so that the wings move gradually. Now the wings raise and fall naturally.

Step 5: Animating the Rays with CSS Transitions & Animations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#owl #rays {
  -webkit-animation: spin 10s infinite linear;
  left: 0;
  opacity: 0;
  top: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#owl:hover #rays {
  opacity: 1;
}

First we change the rays opacity to hide them until hover. Then we add a CSS transition property to gradually fade them in and out when hovered. Similar to how we did with the wings. The only difference this time is that we are transitioning the opacity property in place of the transform property. To get the rays to spin we create a CSS3 keyframes animation titled spin. The animation is called within the rays and set to infinitely rotate the rays image from 0 degrees to 360 degrees, completing a 360 rotation every 10 seconds.

Completed!

Now you should have a fully functional owl.

View the Demo

Additional Notes

You can download a vector version of the owl from Shutterstock. The eyes are an animated GIF, not CSS animations. The eyes certainly could be developed using CSS animations however for this demonstration I wanted to keep it fairly scaled back. Lastly, if you are curious to learn more about CSS3 I would highly recommend picking up Andy Clarke’s Hardboiled Web Design or the A Book Apart CSS3 for Web Designers by Dan Cederholm.