CSS3 Animations using Transition, Transform and Keyframes

I was inspired this weekend by the HTML5.tx conference, so I decided to take the panel’s advice and try something new that I learned.  As I was brainstorming for a topic, I came across “Meng’s” post about Inspirational Parallax Sites and decided to try one using CSS3.

Our Example: A Day at Sea with Nemo and Space Ghost

Before we get started, there’s a catch with CSS3 animations used in this demo: They don’t work in Internet Explorer…not even IE9.

But why???????  Because IE doesn’t support CSS3 transitions or keyframes for that matter.  IE9 does support transforms, but transforms only apply to Nemo in our demo.  But….this doesn’t matter!  We can still use CSS3 animations! See Marcus’s post on The Broken Escalator Problem.

Back to the demo…

The HTML

<div id="sky">
	<div id="clouds1"></div>
	<div id="clouds2"></div>
	<div id="rain-cloud"></div>
	<div id="space-ghost"></div>
</div>
<div id="ocean">
    <div id="wave1"></div>
    <div id="wave2"></div>
	<div id="nemo"><img src="nemo.png" /></div>
    <div id="wave3"></div>
	<div id="wave4"></div>
</div>

The above code basically breaks down to a sky filled with two levels of clouds, a rain cloud and space ghost.  Then we have an ocean with four levels of waves and Nemo, our fish.

Now for our Animations

This is what our page looks like by default without any animations.

This is a screenshot. Link to live demo is at the end of this post.

Animating Our Clouds with CSS3 Transitions and Position

#clouds1 {
	position: absolute;
	background: url(clouds1.png) repeat-x;
	top: 0; left: -9999px; bottom: 0; right: 0;
	height: 60px;
}

#clouds2 {
	position: absolute;
	top: 10px; left: -9999px; bottom: 0; right: 0;
	background: url(clouds2.png) repeat-x 0 0;
	height: 90px;
}

body:hover #clouds1 {
	left: 9999px;
	-webkit-transition: left 2500s linear;
	-moz-transition: left 2500s linear;
	-0-transition: left 2500s linear;
	transition: left 2500s linear;
}
body:hover #clouds2 {
	left: 9999px;
	-webkit-transition: left 1500s linear;
	-moz-transition: left 1500s linear;
	-0-transition: left 1500s linear;
	transition: left 1500s linear;
}

In the code above we’ve set our two cloud divs to be absolute positioned. By setting the left position to -9999px and our background image to repeat along the x-axis, we’re giving our clouds plenty of sky to float in. To make them float, we’re simply saying to shift our background back the other way to 9999px when our mouse hovers over the page. With our CSS3 transition we’ve told the browser to shift our background’s position from -9999px to 9999px at a duration of 2500s. We’ve set the transition-timing-function to linear so that our transition effect has the same speed from start to end. To better explain, if you set the transition-timing-function to ease, then the transition would start slow, then go fast, then end slowly.

You’ll notice the prefixes, -webkit, -moz and -o.  These are the browser specific prefixes used to target webkit browsers (Chrome and Safari), Mozilla browsers (Firefox) and Opera.  The transition property is not yet supported by the default spec within these browsers, so the browser specific prefixes have to be used.

Putting the motion in the ocean…with CSS3 transitions!

#wave1, #wave2, #wave3, #wave4 {
	background: url('waves.png') repeat-x;
	height: 80px;
}

#wave1 {
	position: absolute;
	top: 200px; left: -9999px; right: 0; bottom: 0;
}

#wave2 {
	position: absolute;
	top: 230px; left: 0px; right: 0; bottom: 0;
	background-position: 120px 0;
}

#wave3 {
	position: absolute;
	top: 260px; left: -5555px; right: 0; bottom: 0;
}

#wave4 {
	position: absolute;
	top: 300px; left: 0; right: 0; bottom: 0;
	background-position: 120px 0;
}

body:hover #wave1 {
	left: 9999px;
	-webkit-transition: left 140s linear;
	-moz-transition: left 140s linear;
	-0-transition: left 140s linear;
	transition: left 140s linear;
}

body:hover #wave2 {
	left: -9999px;
	-webkit-transition: left 160s linear;
	-moz-transition: left 160s linear;
	-0-transition: left 160s linear;
	transition: left 160s linear;
}

body:hover #wave3 {
	left: 9999px;
	-webkit-transition: left 180s linear;
	-moz-transition: left 180s linear;
	-0-transition: left 180s linear;
	transition: left 180s linear;
}

body:hover #wave4 {
	left: -9999px;
	-webkit-transition: left 200s linear;
	-moz-transition: left 200s linear;
	-0-transition: left 200s linear;
	transition: left 200s linear;
}

We’ve used the same method as our clouds to animate our waves as well. One of the differences here is that we are using the same background for all of the waves and using positioning to move our image around to different points. We’re also shifting waves 1 and 3 to the right and waves 2 and 4 to the left while moving all 4 waves at different speeds.

Tut…tut. Looks like CSS3 transition rain!

This is a screenshot. Link to live demo is at the end of this post.

#rain-cloud {
	position: absolute;
	top: 25px; left: -200px; bottom: 0; right: 0;
	background: url(rain-cloud.png) no-repeat 0 0;
	height: 125px;
}

body:hover #rain-cloud {
	left: 9999px;
	-webkit-transition: left 50s linear 4s;
	-moz-transition: left 100s linear 4s;
	-o-transition: left 100s linear 4s;
	transition: left 100s linear 4s;
}

Out of nowhere, a rogue cloud has come to rain on our parade!  We’ve used the same transition property, but this time we set a delay of 4 seconds so that our rain cloud doesn’t appear until we’ve had a chance to enjoy the day.

Finding Nemo…with CSS3 transform and keyframes

This is a screenshot. Link to live demo is at the end of this post.

#nemo {
	position: absolute;
	top: 300px; left: 50px;

}

body:hover #nemo {
	-webkit-animation: jumpOut 3s 1 10s;
	-moz-animation: jumpOut 3s 1 10s;
}

body:hover #nemo img {
	-webkit-animation: jumpIn 3s 1 10s;
	-moz-animation: jumpIn 3s 1 10s;
}

@-webkit-keyframes jumpOut {
	from {top: 300px;}
	50% {top: 150px; left: 200px;}
	to {top: 300px; left: 450px;}
}

@-webkit-keyframes jumpIn {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(70deg);}
}

@-moz-keyframes jumpOut {
	from {top: 300px;}
	50% {top: 150px; left: 200px;}
	to {top: 300px; left: 450px;}
}

@-moz-keyframes jumpIn {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(70deg);}
}

We need to make Nemo’s jump look natural, which means he needs to do some rotating before he goes back into the water.  The cool thing about keyframes is that we can set our animation to do different things at different points.  So for this transition, we’re setting the height of Nemo’s jump and when Nemo reaches that height, we’re rotating his body to point back down to the water like he’s diving in.

First, the animation needs to be defined within the keyframes tag.  ”From” essentially means “0%” and “to” means “100%”.  In fact, either 0% or 100% can be used in place of from and to.  The name of your keyframes can be whatever you want it to be.

Once defined, we need to assign the animation to our element by using the animation property.  Within this property we’re specifying which keyframes to use (jumpOut), the duration (3s) and number of times to repeat the keyframes (1) and the delay (10s).  By setting the delay of both jumpOut and jumpIn animations, we’re setting them to occur at the same time, which gives our rotating effect when Nemo jumps out of the water.

Opera, along with IE, do not support keyframes, so you can only view Nemo’s amazing leap within Chrome, Safari and Firefox browsers.

It’s a bird…It’s a plane…It’s Space Ghost!

This is a screenshot. Link to live demo is at the end of this post.

#space-ghost {
	position: absolute;
	top: 25px; left: 2000px; bottom: 0; right: 0;
	background: url(space-ghost.png) no-repeat 0 0;
	height: 125px;
}

body:hover #space-ghost {
	left: -1000px;
	-webkit-transition: left 10s linear 14s;
	-moz-transition: left 10s linear 14s;
	-o-transition: left 10s linear 14s;
	transition: left 10s linear 14s;
}

Have you seen Space Ghost Coast to Coast? If you haven’t, you’re missing out!  Since this is another sky animation, we used the CSS3 transition property again to have Space Ghost fly in from the left.  We set a delay on the transition to 14 seconds, so that Space Ghost doesn’t have to fly through the rain or accidentally take out Nemo.

See it in action!

View the Live CSS3 Animations using Transition, Transform and Keyframes Demo

Be Sociable, Share!

• 

Kari Grooms

Kari is a web developer, music lover and taco addict at any given moment and sometimes all at once.

More Posts - Website - Twitter