Top
A trip in the sky with CSS3 animations (and z-index) – Web is Love – web design services & design stuff
fade
242
single,single-post,postid-242,single-format-standard,eltd-core-1.0,flow-ver-1.1,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-standard,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.11,vc_responsive

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

cover

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

Michela

Interactive designer, I’m specialized in effective and intuitive design systems with a touch of simpatia .

30 Comments

Post a Comment