postcard from Paris – css3 keyframes animations in use

I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo.
Postcard from Paris css3 reframes animation preview

Download the source files

(.psd file included)
Postcard from Paris
.zip 1.9MB

The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and
Android 2.1+ (source Smashing Magazine).
We are going to animate 3 elements : the clouds (there are three layers of clouds), the rotating phare light and the Eiffel Tower sparkling.

The html structure is very simple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Greetings from Paris</title>
</head>
<body>
   <div id="wrap">
      <h1>Bonne Nuit <em>PARIS !</em></h1>
      <div id="phare"></div>		
      <div id="eiffel"></div>
      <div id="eiffel_wrap">
         <div id="sparkling1"></div>
         <div id="sparkling2"></div>
      </div>	
      <div id="roofs"></div>
      <footer>by PeHaa, Paris 2011</footer>
   </div>
</body>
</html>

We will use the following images (I will discuss the sparkling effect a little bit later)
used images
Let’s start to complete the css stylesheet :
ccs part 1

Animating clouds

To animate the three layers of clouds independently we use the following keyframes. (Notice that each time I use the -webkit- and -moz- prefixes).

/* will be applied to #wrap that has 3 backgrounds layers */

	@-webkit-keyframes wind  {
	         0% {background-position: 0px 200px,0px 350px, left top;}
			50% {background-position:  500px 40px,600px 450px, left top;}
			100% {background-position: 1000px 200px,1200px 350px, left top}
	}
	
	@-moz-keyframes wind  {
	         0% {background-position: 0px 200px,0px 350px, left top;}
			50% {background-position:  500px 40px,600px 450px, left top;}
			100% {background-position: 1000px 200px,1200px 350px, left top}
	}

/* will be applied to #roofs that has 2 backgrounds layers */
	
	@-webkit-keyframes wind1 {
	         0% {background-position: 100px 250px, left bottom;}
			50% {background-position:  650px 150px, left bottom;}
			100% {background-position: 1300px 250px, left bottom}
	}
	
	@-moz-keyframes wind1 {
	         0% {background-position: 100px 250px, left bottom;}
			50% {background-position:  650px 150px, left bottom;}
			100% {background-position: 1300px 250px, left bottom}
	}

This way we have defined the property of background-position for the beginning, middle and end of our animation. Next we add :

#wrap {-webkit-animation: wind 80s linear infinite; 
       -moz-animation: wind 80s linear infinite;}
#roofs {-webkit-animation: wind 80s linear infinite;
       -moz-animation: wind 80s linear infinite; }

to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation).

Animating phare light

This time we are going to simultaneously animate the opacity and rotate the phare light with the rotation origin in its top center point (as in the image above).

	@-webkit-keyframes phare {
	         0% { -webkit-transform:rotate(0deg); opacity:0} 
		50% { -webkit-transform:rotate(180deg); opacity:1} 
	        100% { -webkit-transform:rotate(360deg); opacity:0;}
	}
        #phare {-webkit-transform-origin: center top; 
	        -webkit-animation: phare 15s linear infinite;}

(here and further, repeat the same with -moz- prefixes).

Adding sparkles

We will use two different images with sparkling effect
Sparkling
Below is the styling :

#eiffel_wrap { position:absolute; width:240px; 
              height:462px; right:10px; top: 180px; opacity:0;}
#sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat; 
              width:240px; height:462px; opacity:0;}
#sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat; 
              width:240px; height:462px;  opacity:0;}

We will animate the #eiffel_wrap, #sparkling1 and #sparkling2.

@-webkit-keyframes sparkling {
		0% {opacity:0;}
		50%{opacity:1;}
		100% {opacity:0;}
	}

The idea is to use the sparkling animation to turn out and in the #sparkling1 and #sparkling2 elements within the 0.4s cycle, with the first in/out when the second is out/in. To achieve that we will delay the sparkling animation of 0.2s on #sparkling1.

>
#sparkling1 {-webkit-animation: sparkling .4s .2s  infinite;}
#sparkling2 {-webkit-animation: sparkling .4s  infinite;}

In Paris this beautiful evening spectacle may be seen for several minutes every full hour. We will use the #eiffel_wrap element and eiffel_wrap animation to recreate this effect (not literarily though – I will not make you wait an hour long).

#eiffel_wrap { -webkit-animation: eiffel_wrap 30s 1s  infinite;} 
@-webkit-keyframes eiffel_wrap {
		    0% {opacity:1;-webkit-animation-timing-function: steps(1);}
			40%{opacity:0;}
			100% {opacity:0;}
			}

With -webkit-animation-timing-function: steps(1); the transition is instantaneous with no fading out effect.

And here we are.
I hope you found this tutorial useful and got inspired. Please share and bookmark if you like it.
As always I’m looking forward to your comments and… see you in Paris !

15 thoughts on “postcard from Paris – css3 keyframes animations in use”

  1. Great tutorial. I managed to replicate it at first so thanks for sharing with us. I hope you’ll have some more to come. I’ll keep my eyes on your blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">