Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | CSS3 Animations: IN 3D IMAX
2740
single,single-post,postid-2740,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
3D

CSS3 Animations: IN 3D IMAX

 

If you’re anything like me, the one thing you hate most in the world besides clowns is having to wait for something.  This applies to rides at Disneyland, saving PSD files and PS3 games, and loading websites on the internet.

So today we look at ways you can accomplish simple animations through CSS instead of having to rely on a fat, juicy JavaScript library.  Admittedly, jQuery can be delicious, but it packs on pounds (aka load time) and in many cases it won’t be long before your site is wearing sweatpants because it can’t fit into its skinny jeans anymore.

 

THE ONE WITH THE @KEYFRAMES RULE

 The @keyframes rule is where animation begins with CSS elements. Think of what’s about to happen to your element as if it were going to move along a timeline.  So you’ll have a “from” attribute and a “to” attribute and the animation will gradually happen between the two defined extremes of your style.  Example:

 

@keyframes myAnimation {

from {opacity: 1;}

to{opacity: .3;}

}

 

You then apply this animation you’ve just created to an element in your style sheet, along with a duration time (in seconds) as seen below…

div {

animation: myanimation 5s;

-moz-animation: myanimation 5s; /* Firefox */

-webkit-animation: myanimation 5s; /* Safari and Chrome */

}

and congratulations! It’s a boy…I mean, you’ve just animated something! Remember the duration is important; if you don’t specify a duration after your animation, the default will be 0 and the animation won’t run.

You can apply this to any style that exists for CSS3; you can animate size, opacity, color, text, line height, z-index, etc.   If also consider your 3D space, you can create some very complex animations with nothing but CSS classes.  In most cases that I’ve researched, some minimal JavaScript is sometimes required simply to change the CSS class of objects on the html sheet, but loading a single JavaScript page with 200 lines of code (uncompressed) is a LOT easier on your site’s processing power than loading a long sheet of custom code PLUS a giant JavaScript library like jQuery or mootools, god bless ‘em.

There’s also a way to make multiple animations happen at different intervals during the overall time frame that your animation occurs.  Say I have a 10 second animation and I want to change the color of my element halfway through while it slides across the stage.   You can specify this change by using a percentage, like so:

@keyframes myanimation

{

from {left: 0px;}

to {left: 100px;}

50%  {background: blue;}

}

 

The 50% mark indicates halfway through the transition.  So if your transition is 10 seconds long, at 5 seconds the background color will change. If it’s 20 seconds long, the change will happen at 10 seconds and so on and so forth.  The nice thing about using these percentages is that the animation stays properly scaled no matter how long or how short you make it.

You can also create sprite sheets and easily animate through them with CSS animations instead of using javascript.  Here’s an article describing this very process for the iPhone site; a simple, and well executed example that looks more complicated on the front side then it actually is on the back.

http://johnbhall.com/iphone-4s/

And the real version, for context: http://www.apple.com/iphone/ (I’m sure you’ve all been there before, don’t deny it)

 

THE ONE WITH 3D CSS ANIMATIONS

There are two commands necessary to rotate objects through “3D” space with CSS animations. They are (wait for it…)

rotateX(), and rotateY()

These are considered CSS transformations and would be used as following:

div

{

transform: rotateX(180deg);

-webkit-transform: rotateX(180deg); /* Safari and Chrome */

-moz-transform: rotateX(180deg); /* Firefox */

}

 

The above code would take an object and rotate it 180 degrees on its Y axis.

Both of these commands will turn the object as if the said axis were running down its middle.  Both have the potential to create 3D-ish looking movement in a 2D environment; a good example of these in action is here:

http://tympanus.net/Development/ImageTransitions/index5.html

A slightly more sophisticated example, Beercamp’s online CSS driven pop-up book http://2012.beercamp.com/

For both sites, JavaScript is used sparingly the background to apply different CSS styles to each element on the page; so for each element there’s a “folding up” style, a “stationary” style, and a “folding down” style, and depending on the mouse placement on the page, the js will trigger and simply switch the element’s style to whichever “animation” needs to be firing at that given moment.

 

For more information on CSS animations, visit:

http://www.w3schools.com/css3/css3_animations.asp

And

http://www.w3schools.com/css3/css3_3dtransforms.asp