postcard from Paris – css3 keyframes animations in use

15/08/11

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 Responses to “postcard from Paris – css3 keyframes animations in use”

  1. Wijdan Rohail

    Aug 15th, 2011

    Impressive article, I got some points from this as I’ve done some practice by following it. Thanks from me.

  2. Joyoge Design Community

    Aug 15th, 2011

    nice creative work here, thanks for the tut.

  3. wendell

    Aug 17th, 2011

    good job! :) hope to see more tutorial

  4. Simon

    Aug 19th, 2011

    really cool creative work, thank you very much. I will try to create a postcard for my hometown.

  5. Joe Waltson

    Aug 22nd, 2011

    Nice work, Professional piece of technique, learned a lot from this. Thanks for sharing

  6. Anriah

    Oct 15th, 2011

    thank you!!! i will try with your instructions to build something like this :D

  7. John

    Dec 17th, 2011

    interesting stuff, I will try it! thank you so much

  8. [...] postcard from Paris – css3 keyframes animations in use | PeHaa Blog Let’s start to complete the css stylesheet : Animating clouds [...]

  9. Yves

    Jan 8th, 2012

    Woaw ! Very good tutorial ! Thanks for sharing !!!

  10. laxmikant rajput

    Apr 4th, 2012

    Very Very Nice Tutorial

  11. Rafadev

    May 23rd, 2013

    Hi, any demo for your tutorial? nice postcard :)

  12. Rafadev

    May 23rd, 2013

    Oh sorry, didnt read your post carefully, really cool demo , smooth animation!

  13. sudha

    Jun 17th, 2013

    awesome ex-lent tutorial Thanks a Lot

  14. Stefan

    Jul 10th, 2013

    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