Pseudo elements with custom attributes to create a css3 menu that will bounce

You must have already seen this (what I call “bouncing”) hover effect in navigation menus. Curious how to recreate it easily ?
Below you’ll find my approach, for a simple 1-level menu as well as a drop-down one.
It’s pure css, I use an :after pseudo-element with a custom attribute.
Make sure you’re using a modern browser (support for css3 transitions is required) and click on the image below to see the demo.

Bouncing css3 menu using pseudo elements with custom attributes - demo

The mark-up is typical

<nav class="ph-lift">
<ul>
	<li class="active"><a href="#home" data-title="Home">Home</a></li>
	<li><a href="#portfolio" data-title="My works">My works</a></li>
	<li><a href="#about" data-title="Who am I?">Who am I?</a></li>
	<li><a href="#contact" data-title="Contact me">Contact me</a></li>
</ul>
</nav>

Note that I added a data-title attribute containing the link label to each a.
The idea is to have a li element with overflow:hidden. The first on-hover effect is to change its background color and add some inner shadow with a smooth transition (don’t forget the vendor prefixes !).

nav.ph-lift ul li {
    float: left;
    height: 90px;
    line-height: 90px;
    background: white;
    overflow: hidden;
    transition: all.6s ease; }
    nav.ph-lift ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: teal; }

With :after pseudo element I generate a “copy” of the link element, that is positioned below the link. For its content I use the “data-title” attribute.
On mouse-hover the link changes its margin-top property (again, with a smooth transition).

	nav.ph-lift ul li a {
      display: block;
      text-decoration: none;
      color: #007e7e;
      padding: 0 45px;
      margin-top: 0;
      transition: all.6s ease; }
    nav.ph-lift ul li:hover a {
      margin-top: -90px;
      color: white;
      text-shadow: 0 1px 2px  black; }
      nav.ph-lift ul li a:after {
        content: attr(data-title);
        display: block; }

In the case of drop-down menu, we can no longer have the li {overflow:hidden}. In this case I change the mark-up:

<nav class="ph-lift1">
<ul>
	<li class="active"><a href="#home" data-title="Home"><span data-title="Home">Home</span></a>
<ul>
	<li><a href="#"><span data-title="Featured">Featured</span></a></li>
	<li><a href="#"><span data-title="Top 10">Top 10</span></a></li>
</ul>
</li>
	<li><a href="#portfolio"><span data-title="My works">My works</span></a>
<ul>
	<li><a href="#"><span data-title="Web design">Web design</span></a></li>
	<li><a href="#"><span data-title="Illustrations">Illustrations</span></a></li>
	<li><a href="#"><span data-title="Patterns">Patterns</span></a></li>
</ul>
</li>
	<li><a href="#"><span data-title="Who am I?">Who am I?</span></a></li>
	<li><a href="#"><span data-title="Contact me">Contact me</span></a>
<ul>
	<li><a href="#"><span data-title="Email me">Email me</span></a></li>
	<li><a href="#"><span data-title="Network">Network</span></a></li>
</ul>
</li>
</ul>
</nav>

The main idea is still the same. Now, I apply overflow:hidden to the a element, and generate the pseudo element for my span.

 nav.ph-lift1 > ul > li {
    float: left; }
  nav.ph-lift1 ul li {
    height: 80px;
    line-height: 80px;
    background: white;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease; }
    nav.ph-lift1 ul li ul {
      max-height: 0;
      -webkit-transition: all.6s ease;
      -moz-transition: all.6s ease;
      overflow: hidden;
      display: block; }
    nav.ph-lift1 ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: darkolivegreen; }
    nav.ph-lift1 ul li:hover ul {
      max-height: 300px; }
	nav.ph-lift1 ul li a {
      display: block;
      overflow: hidden;
      text-decoration: none;
      color: #546a2f;
      height: 80px; }
    nav.ph-lift1 ul li ul li a {
      color: #7e7e00; }
    nav.ph-lift1 ul li ul li:hover {
      background: olive; }
	nav.ph-lift1 ul li a span {
        -webkit-transition: all.6s ease;
        -moz-transition: all.6s ease;
        -o-transition: all.6s ease;
        -ms-transition: all.6s ease;
        transition: all.6s ease;
        display: block;
        padding: 0 40px; }
    nav.ph-lift1 ul li:hover > a span {
      margin-top: -80px;
      color: white;
      text-shadow: 0 1px 2px  black; }
      nav.ph-lift1 ul li a span:after {
        content: attr(data-title);
        display: block; }

Don’t hesitate to play with this effect, it’s just a basic idea.
I hope you enjoyed this tutorial, if so – please share with the others. I’m looking forward to your feedback. Thanks.

Create your portfolio gallery using html5 canvas – tutorial

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. See the demo and try the hover effect. The grayscale “copies” of the images are created with canvas and we use pure css3 for the smooth changes.

Photo gallery with html5 canvas

Download the source files

Portfolio gallery with canvas
.zip 0.25MB

Step 1 : Html markup

Let’s start with a simple markup, each portfolio entry being an element of an unordered list.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Gallery :: Tutorial by PeHaa </title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
	<div id="wrap">
		<h1>Gallery</h1>
		<ul id="gallery">
			<li><a href=""><img src="images/flo1.jpg"><div>Spring flowers 1</div></a></li>
			<li><a href=""><img src="images/lights2.jpg"><div>City lights 1</div></a></li>
			<li><a href=""><img src="images/flo3.jpg"><div>Spring flowers 2</div></a></li>
			<li><a href=""><img src="images/lights1.jpg"><div>City lights 2</div></a></li>
			<li><a href=""><img src="images/flo2.jpg"><div>Spring flowers 3</div></a></li>
			<li><a href=""><img src="images/lights3.jpg"><div>City lights 3</div></a></li>
		</ul>
		<p>Photos by <a href="http://pinkonhead.com">Pinkonhead</a></p>
	</div>
</body>
</html>


Step 2: Basic styles

We start our stylesheet with a basic reset.

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}
:focus {outline: 0;}
a {text-decoration:none;}

We will use 300px x 300px images. The main containing element #wrap is centered up (margin: 0 auto) and given the width of 1020px (=340 x 3).
The list items are given float : left and are positioned relatively. The image title is wrapped in a div element that slides up on hover. To achieve a smooth effect we apply a css3 transition.
(Note that for the simplicity of this tutorial I don’t use any vendor prefixes. Therefore, you’ll find them in the source file to download).

#wrap {
  width: 1020px; 
  margin: 0 auto;
} 
li {
  float:left; 
  position:relative; 
  display:inline-block; 
  width:300px; 
  height:300px;
  margin:10px; 
  padding:10px; 
  background:#fff; 
  box-shadow:0 0 5px rgba(0,0,0,.35);
}
li div {
  position:absolute;
  height:0; 
  width:280px;
  background:rgba(0,0,0,.45); 
  overflow:hidden;
  bottom:10px; 
  left:10px;
  padding: 0 10px;
  line-height:50px;
  color:#fff;
  transition:height 1s;
}
li:hover div {
  height:50px;
}

Click on the image to below to see the result at the current stage.

Photo gallery with canvas

Step 3: Canvas

Now, we will make use of the html5 canvas element to draw the grayscale versions of our images. Below you’ll find a createCanvas custom function that creates a canvas element, takes a copy of an image, performs the conversion and draws it to the canvas and finally inserts the canvas to the DOM where desired. With .each() method the createCanvas function is iterated across all images within the #gallery list.

$(window).load(function() {

	  $('#gallery img').each(function() {

	    createCanvas(this);
	  });

	  function createCanvas(image) {

	    var canvas = document.createElement('canvas');
	    if (canvas.getContext) {
	      var ctx = canvas.getContext("2d");

// specify canvas size
	      canvas.width = image.width;
	      canvas.height = image.height;

// Once we have a reference to the source image object we can use 
// the drawImage(reference, x, y) method to render it to the canvas. 
//x, y are the coordinates on the target canvas where the image should be placed.
	      ctx.drawImage(image, 0, 0);

// Taking the image data and storing it in the imageData array. 
//You can read the pixel data on a canvas using the getImageData() method. 
// Image data includes the colour of the pixel (decimal, rgb values) and alpha value. 
// Each color component is represented by an integer between 0 and 255. 
//imageData.data contains height x width x 4 bytes of data, with index values ranging from 0 to (height x width x 4)-1.
	      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
	          pixelData = imageData.data;

// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
	      for (var y = 0; y < canvas.height; y++) {
	        for (var x = 0; x < canvas.width; x++) {

// You can access the color values of the (x,y) pixel as follows :
	          var i = (y * 4 * canvas.width) + (x * 4);

// Get the RGB values.
	          var red = pixelData[i];
	          var green = pixelData[i + 1];
	          var blue = pixelData[i + 2];

// Convert to grayscale. One of the formulas of conversion (e.g. you could try a simple average (red+green+blue)/3)   
	          var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);

	          pixelData[i] = grayScale;
	          pixelData[i + 1] = grayScale;
	          pixelData[i + 2] = grayScale;
	        }
	      }

// Putting the modified imageData back on the canvas.
	      ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

// Inserting the canvas in the DOM, before the image:
	      image.parentNode.insertBefore(canvas, image);
	    }
	  }
	});


Step 4: Styling the canvas

If you look into the generated code source you’ll find

<ul id="gallery">
	<li><a href=""><canvas width="300" height="300"></canvas><img src="images/flo1.jpg"><div>Spring flowers 1</div></a></li>
	<li><a href=""><canvas width="300" height="300"></canvas><img src="images/lights2.jpg"><div>City lights 1</div></a></li>
	<li>...</li>
	...
</ul>

Let’s add some styling to define the canvas behavior in normal and hover state:

canvas {
  opacity:1; 
  position:absolute; 
  top:10px;
  left:10px;
  transition:opacity 1s .2s;
}
li:hover canvas {
  opacity:0;
}

And that’s it ! This example will not work in Internet Explorer versions below 9. You could provide an alternative solution using grayscale filter and adding some jQuery to recreate the transition effect on hover – but this part is not covered in this tutorial.

The beautiful photos featured here were taken by Pinkonhead, and are shared as freebies on her blog. Enjoy.

Create a fancy responsive image-on-hover effect

In this tutorial we will create a fancy image-on-hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively.

Two version of an image

Download the source files

Fancy responsive image-on-hover effect
.zip 0.2MB

Step 1 : Photoshop

We have to prepare two versions of the image : the image we want to see on hover and its desaturated copy. Mine are 845px x 515px.

Two version of an image

Step 2 : Let’s start with the html markup

..
<div id="wrap">
<ul>
   <li>
      <div>
          <img src="img/tut1_desaturated.jpg"/>
          <span class="shadow"></span>
          <img class="onhover" src="img/tut1_color.jpg"/>
      </div>
   </li>
</ul>
</div>

Step 3: Basic styles

We start our stylesheet with a basic reset.

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}

The main containing element #wrap is centered up and given the specific width 865 px = 845px (image size) + 2x10px (borders size).
The div that contains the images is given position:relative (to properly position the two versions of the image) and overflow hidden (we will size up and rotate our images and we want to hide the exceeding parts).

#wrap { width: 865px; margin: 0 auto;}
ul {margin-top:50px; }
li div {width:845px; height:515px; overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px  rgba(0,0,0,.4);}

Step 4: Grayscale to color transition (see demo)

The img element is positioned relatively, the colored version (.onhover) is given 0 opacity and absolute position. When the containing div is being hovered over the opacity of .onhover element changes to 1. To make the transition smooth we apply the transition property to img. (For simplicity I decided to omit all vendor prefixes).

img {position:relative; top:0;left:0;
transition:all 1.5s .5s; }
img.onhover {opacity:0;position:absolute;}
li div:hover img.onhover {opacity:1;}

To deepen the effect of transition between the normal and hover state we will add a fading out inner shadow (span.shadow):

.shadow {position:absolute; top:0; left:0; opacity:1; background:transparent;
width:100%; height:100%;
box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);
transition:opacity 1.5s .5s;}
li div:hover .shadow {opacity:0;}

Step 5: Let’s add scaling and rotation (see demo)

We just have to add the transform property, specify the transform origin as well as the transform parameters in hover state.

img {position:relative; top:0;left:0;
transition:all 1.5s .5s;
transform: rotate(-4deg) scale(1.2);
transform-origin:50% 50%;}

li div:hover img {transform: scale(1) rotate(0);}

Step 6: And what if we want it responsive ? (see demo)

First let’s modify a little bit the style of #wrap and the li div to keep them flexible. In the latter case we just no longer specify the height and width of the element.

#wrap { max-width: 865px; margin: 0 auto; width:95%;}
li div { overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px rgba(0,0,0,.4);}

We have also to modify the styling of the img element – we add three new properties to the img element.

img {max-width:auto; vertical-align:bottom; width:100%;}

Step 7: jQuery solution

We will add a jQuery solutions for IE.

<!--[if lt IE 9]><script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
	$(document).ready(function() { 
           $('.onhover').hide();
$('li div').hover(function(){
$(this).find('.onhover').fadeIn(1000);
},function(){
$(this).find('.onhover').fadeOut(1000);
})
})
</script><![endif]-->

You can also go further and recreate the full transition with jQuery animate function.

And that’s it. I hope you got inspired by this example – it’s your turn to play with css transitions. Enjoy !

Intriguing animate-on-scroll effect – jQuery tutorial

I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website.
In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration.

Click here to see the demo.
My herb garden preview

Download the source files

My herb garden
.zip 0.4MB

We’ll start with the html structure :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My herb garden</title>
</head>
<body>
<div id="wrap_out">
  <div id='wrap'>
    <header>
      <h1>My <em>herb</em> garden</h1>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.</p>
    </header>
    <div id="separation">
      <div>Scroll <em>down</em></div>
      <img src="images/herbes.jpg" width="592" height="350" alt="Herbes"> </div>
    <section>
      <div  id="coriander" class="element">
        <div>coriander</div>
        <img src="images/coriander1.jpg" width="286" height="232" alt="Coriander">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
      </div>
      <div  id="rosemary" class="element">...</div>
      <div  id="lemonbalm" class="element">...</div>
      <div  id="chives" class="element">...</div>
      <div  id="basil" class="element">...</div>
    </section>
    <footer> <a href="http://pehaa.com"> by <em>PeHaa</em> 2011</a> </footer>
  </div>
</div>
</body>
</html>

The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap.
The stylesheet begins with a simple css reset and the @font-face declaration

body, div, h1, h2, form, fieldset, input, textarea, footer, p, img {
	margin: 0; padding: 0; border: 0; outline: none;
}
a { text-decoration:none; color: #fff;}

 @font-face {
 font-family: 'DeibiRegular';
 src: url('deibi-webfont.eot');
 src: url('deibi-webfont.eot?#iefix') format('embedded-opentype'),  url('deibi-webfont.woff') format('woff'),  url('deibi-webfont.ttf') format('truetype'),  url('deibi-webfont.svg#DeibiRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Right now, the important point is to set width : 100% and overflow-x: hidden for the #wrap_out. The #wrap element centers the content of the page.
section is positioned relatively and the animated herbs (class="element") are positioned absolutely.
Let’s continue with our stylesheet :

body { 
	font-family:'DeibiRegular', Helvetica, Arial, sans-serif;
	background:#f2f2f2 url('images/bg.jpg');
	color: #fff; width:100%;
}
#wrap_out {width:100%; overflow-x:hidden;}
#wrap {width: 960px; margin: 0 auto; z-index:1;position:relative;}


header {display:block;z-index:2 position:relative;}
header p {display:block; font-size:30px; padding: 70px 60px 0px;}
h1 {text-align:center;font-size:130px; margin-top: 30px; text-shadow: 0 0 60px #889473;}
h1 em {color: #f5f187;font-style: normal;}

#separation {margin: 0 auto;width: 592px;z-index:-1;position:relative;}

section {position:relative; margin-top: 120px;display:block}

.element { position:absolute; display:block;}
.element#coriander {top:0px; left:30px; width: 286px; height: 272px;}
.element#rosemary {top:40px; left: 335px; width: 370px; height: 183px;}
.element#chives {top : 0px; right:30px; width: 197px; height: 514px;}
.element#lemonbalm {left: 30px; top:280px; width:265px; height: 233px;}
.element#basil {right: 255px; top:250px; width:368px; height: 263px;}

footer {margin-bottom: 10px;text-align:center;font-size: 30px; display:block}

The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. We want the #separation to stay there when the window is resized but to move up when we start to scroll down. A possible way to do that is to make the height of the header element dependent on the height of the window browser :

$(document).ready(function () {
    var myHeight;

    function init() {
        myHeight = $(window).height();
        $('header').css('height', myHeight - 300);
    }
    init();
    $(window).resize(function () {
        init();

    });
})

To animate the .element we’ll go simple and use a linear function to move it from its initial position to its target position. We assign four parameters (its initial and final coordinates) to each element :

$('.element').each(function(i) {
			var myElement =$(this);
			
			
				switch (i)
				{ case 0 : 
					myElement.data('params', {top0 : -1300, x0 : -2600, top1: $(this).css('top'), x1: $(this).css('left')}); 
					break; 
				case 1 : 
					myElement.data('params', {top0 : 0, x0 : -930, top1: $(this).css('top'), x1: $(this).css('left')}); 
					break; 
				case 2 : 
					myElement.data('params', {top0 : 280, x0 : -1030, top1: $(this).css('top'), x1: $(this).css('left')});
					break; 	
				 case 3 : 
					myElement.data('params', {top0 : -1200, x0 : -2330, top1: $(this).css('top'), x1: $(this).css('right')}); 
					break; 
				case 4 : 
					myElement.data('params', {top0 : 250, x0 : -530, top1: $(this).css('top'), x1: $(this).css('right')}); 
					break; 
				}
			});

What happens when we scroll ? The top property of each element and the left (for coriander, rosemary and lemon bald) or right (for chives and basil) changes as a function of the scroll position :

 
$(window).scroll(function () {
var s_max = myHeight / 2 + 500;
    function move(p0, p1, s) {
        return Math.min((-p0 + p1) / s_max * s + p0, p1);
    }
	
    var scrollTop = parseInt($(window).scrollTop());
    $('.element').each(function (i) {
       

        var myX = move($(this).data('params').x0, parseInt($(this).data('params').x1), scrollTop),
            myY = move($(this).data('params').top0, parseInt($(this).data('params').top1), scrollTop);
        
if (i < 3) {
            $(this).stop().css({
                left: myX + 'px',
                top: myY + 'px'
            })
        } else {
            $(this).stop().css({
                right: myX + 'px',
                top: myY + 'px'
            })
        }
    })
})

move is a function of the scroll value and has two parameters : initial (p0) and final (p1) position of an element.
Before we start scrolling, s = 0, move is equeal to p0. When scroll reaches s_max, the value of move is p1. The min operator prevents further movement.
As I said this is one of the simplest possible solutions.
What is s_max ? I wanted the animation to finish once the elements are verticaly centered in the middle of the window (I’m not pixel perfect here).
Where is that point ? Imagine that we don’t animate our elements and that they are in their final positions. Notice that we have to scroll down 500px (see the scheme below), to see the top of the second row of our herbs. If we scroll down a half height of a window more we will see them in the middle.
My herb garden preview
We want to be sure that the page is high enough so that the elements could reach their final positions. To assure that we will make the property height of section dependent on the height of the browser window, in this case we need to scroll $(window).height/2 + 500. We have 240px above the section (120px + 120px). The minimum height of section is then $(window).height/2 + 260. We add a line to the init function

function init() {
    myHeight = $(window).height();
    $('header').css('height', myHeight - 300);
    $('section').css('min-height', Math.max(myHeight / 2 + 260, 600));
}

It was tested in Safari, Firefox, Chrome, Opera, IE7 and IE8. It works in the last two if you don’t forget to add

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I hope you find it useful. Please bookmark and share.
Let me know what you think – I’m looking forward to your comments. Thanks.

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 !