Web is love

Web & design stuff

A trip in the sky with CSS3 animations (and z-index)

As already known, with CSS3 animations is possible animate objects even without Javascript or Flash. I had the chance to experiment a bit with animation properties in a recent work. This made me better understand the logic behind the animations.

We are going to see a step by step tutorial and how to apply it on a live example.
At the moment you can enjoy the animation only in webkit browsers (Chrome and Safari)

The markup

We have a very simple page coded in HTML5, below there is the portion of code involved to achieve the effect.
<body>
<div class="balloon-container">
<figure>
<img src="images/air-balloon.png" alt="" />
</figure>
</div>
<div id="wrapper">

Basic CSS

Before to see the animation properties in detail, let’s take a look at some CSS properties required to prepare the ground.
In this case we need the overlapping of two different background images and to put the animated image between them ( see image below)

First of all we need a background image of the sky and some clouds
html {
background : #8ac2e5 url('images/main-bg.png') left top repeat-x;
}

The next will be the container of the image we want to animate
.balloon-container {
height : 500px;
top : 0px;
width : 100%;
z-index : 1 ;
position : absolute;
}

And finally we have the .wrapper div with the rest of the page content and some other clouds as background.
#wrapper{
position : relative;
width : 960px;
margin : 0 auto;
background : transparent url('images/page-bg.png') 30px 105px no-repeat;
z-index : 2;
}

The position property allows the overlapping between the .balloon-container and the .wrapper

z-index property specifies the stack order we need to achieve.

Define the three animations we need to move our air balloon

With the first animation called position we are just setting the start and end coordinates of the animation, in other words the exact position we want it starts and ends in the page.
Of course this is a particular case, indeed you can also set intermediated phases (eg . 20%, 31% and so) if you need to move the object along a different path.

@-webkit-keyframes position {
0% { top : 220px; left : 0%; }
100% { top : 146px; left : 75%; }
}

The second animation is called fade and sets the opacity during the animation phases.
@-webkit-keyframes fade
{
0% { opacity : 0; }
10% { opacity : 1; }
80% { opacity : 1; }
100% { opacity : 0; }
}

The third and last animation is called reduce
We want a depth effect as the air balloon goes away, so we reduce the size of the image with the –webkit-transform property.

@-webkit-keyframes reduce {
0% { -webkit-transform : scale(1) ; }
40% { -webkit-transform : scale(1) ; }
60% { -webkit-transform : scale(0.9) ; }
100% { -webkit-transform : scale(0.5) ; }
}

Start the animation

Positioning this element with top: -300px, the image will be invisible in a browser that doesn’t support animations and will improve the animation behaviour avoiding a sudden reappearance of the air balloon at the end.

—webkit–animation–name associates the animation(s) at the air balloon image
—webkit–animation–duration set the duration of the animation in seconds
—webkit–animation–iteration–count set the number of times we want to repeat the animation
—webkit–animation–direction set a no return trip
—webkit–animation–delay set the delay, if needed, before the start of the animation.
—webkit–animation–timing–function a smooth curve defined by a mathematical function, more examples of other keywords for this properties and their value here
—webkit–transform–origin

.balloon-container figure img{
position : absolute;
top : -300px;
-webkit-animation-name: position, reduce, fade;
-webkit-animation-duration : 30s;
-webkit-animation-iteration-count : 1;
-webkit-animation-direction : normal;
-webkit-animation-delay : 0s;
-webkit-animation-timing-function : ease-in-out;
-webkit-transform-origin : 50% -100%;
}

Finally we have our animation fully working.

Conclusions

I preferred to leave a flexible area width for the animation, so, if you resize the browser window, you can experiment different overlappings.
This animation has been created exclusively with CSS, sometimes this can be enough, sometimes we need Javascript to handle other particular events

Further readings and examples

Written by Michela

  1. I’m so impatient… I want to use all these new fetures of html 5 and css3.
    Wonderful illustrations, creative use of CSS3 animations… as usual great article, dear Michy.

  2. At least add the -moz prefixes as well. Firefox 3.7a suuports CSS transitions. Really annoying finding demos that only work for webkit.

  3. Seriously excellent tutorial & example.
    Great and Innovative Idea. Great article and a nice site,
    Keep it up !

  4. Safari CPU rises to 25% for this simple effect. Yay CSS3!

  5. M, this is animations, not transitions. Firefox 4 will support transitions, but not animations. Animations still only work in Webkit-based browsers.

  6. it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  7. I practiced this tutorial.
    It’s so useful and easy to learning.
    the work is lovely and enjoyable.
    Thank U!

  8. Hello Michaela
    nice article / nice website.
    I will get back regularly.
    thanks

  9. Thanks for this great article!

  10. What goes around comes around. Your good blog is attracting only good visitors.

  11. ooooh very nice! Works great. Thanks!

  12. Excellent round up over the creative use of CSS3 animation with effective illustrations & with the proper coding implements. Thank you so much for sharing this post.

    http://www.freecssshowcase.com/

    Get some inspiration on best CSS sites available on the net by clicking on the above link.

  13. Very cool effect, thanks for sharing!

  14. Thanks for the trip, Demo and example, it helped me much and hope that for all others

  15. 革のひもすべての周りのシャフト簡単/オフ、素敵な刻まれたかかと、鞭ステッチ縫いでデザイン万能トレイル。可能性がありますブーツは今すぐ利用可能で、最大選択とき靴ショッピングは関係。“anchor_text”

Add your Reply

Archives

Latest writings

  1. Souvenir from Boa Vista – 7 colour palettes
  2. “Re del Silenzio” free wallpaper
  3. Napa, your organic, handwritten, free font
  4. Find the time for your projects’ makeup
  5. Dot Party, 5 free dotted patterns