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)
See the demo
Download the full example
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.
See the demo
Download the full example
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
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.
At least add the -moz prefixes as well. Firefox 3.7a suuports CSS transitions. Really annoying finding demos that only work for webkit.
Seriously excellent tutorial & example.
Great and Innovative Idea. Great article and a nice site,
Keep it up !
Safari CPU rises to 25% for this simple effect. Yay CSS3!
M, this is animations, not transitions. Firefox 4 will support transitions, but not animations. Animations still only work in Webkit-based browsers.
Hi Zoe, thanks for your contribute
it was very interesting to read.
I want to quote your post in my blog. It can?
And you et an account on Twitter?
I practiced this tutorial.
It’s so useful and easy to learning.
the work is lovely and enjoyable.
Thank U!