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.
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)
Let’s start to complete the css stylesheet :
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
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 !
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.
Joyoge Design Community
Aug 15th, 2011
nice creative work here, thanks for the tut.
wendell
Aug 17th, 2011
good job! :) hope to see more tutorial
Simon
Aug 19th, 2011
really cool creative work, thank you very much. I will try to create a postcard for my hometown.
PeHaa
Aug 19th, 2011
Thanks ! And don’t forget to drop once it’s ready :)
Joe Waltson
Aug 22nd, 2011
Nice work, Professional piece of technique, learned a lot from this. Thanks for sharing
Anriah
Oct 15th, 2011
thank you!!! i will try with your instructions to build something like this :D
John
Dec 17th, 2011
interesting stuff, I will try it! thank you so much
CSS by justasr - Pearltrees
Jan 7th, 2012
[...] postcard from Paris – css3 keyframes animations in use | PeHaa Blog Let’s start to complete the css stylesheet : Animating clouds [...]
Yves
Jan 8th, 2012
Woaw ! Very good tutorial ! Thanks for sharing !!!
laxmikant rajput
Apr 4th, 2012
Very Very Nice Tutorial