Browser support
A new feature of CSS 3 brings to the table is animation. Unfortunately at the time of writing, only the webkit browsers (Safari & Chrome) support the animation feature hence the preceeding -webkit-'s you see.
If you're viewing this article in a different browser, I'm afraid it's not going to look very interesting... And if you're using Internet Explorer, for god sake don't!
Nevertheless
It's always fun to play with new toys so lets get started.
There are essentially two parts to an animation.
@keyframes myAnimation - This basically defines the animation (myAnimation) that will take place but doesn't do much on it's own.
Assigning myAnimation - We need to tell our image, or paragraph or div to perform myAnimation and specify properties such as animation-duration (time for animation to complete) and animation-iteration-count (number of times the animation repeats).
@keyframes
If you have used JQuery's Animate function before, you may already have a good idea as to what effects are possible using which CSS 2 properties. But this is CSS 3, so lets use some new transform methods, namely translate, rotate and scale
Scale
Here I've made a simple animation to pulse my image... I've called it pulse...
0% { -webkit-transform:scale(1); } /* our start point */
50% { -webkit-transform:scale(1.1); } /* scale both x and y to 1.1 */
100% { -webkit-transform:scale(1); } /* return to start point */
}
/* our class, set : animationName Duration timingFunction Delay Repetitions */
.pulse { -webkit-animation:pulse 1.5s ease-out 1s 5; }
Rotate
I've just created a... thing... well possibly a loading gif thing, but mainly it just messes with your brain!
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes antiload {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
.load {-webkit-animation:load 2s linear 10;} /* outermost circle */
.anti-load {-webkit-animation:antiload 4s linear 5;}
.slow-load {-webkit-animation:load 4s linear 5;} /* innermost circle */
Translate
weee a car. I've also snuck in a 3D transform here, rotateY(). Notice that you can stack transformations.
0% { -webkit-transform:translate(0, 0); } /* Start point */
49% { -webkit-transform:translate(300px, 0) rotateY(0deg); } /* stop */
50% { -webkit-transform:translate(300px, 0) rotateY(180deg); } /* turn around */
99% { -webkit-transform:translate(0px, 0) rotateY(180deg); } /* return to start point */
100% { -webkit-transform:translate(0px, 0) rotateY(0deg); } /* turn back around */
}
.drive {-webkit-animation:drive 5s ease 5;}
Trigger animations
You'll notice that the animations play once the page has loaded but you may want to trigger the animations with mouse hover. Well you can always write
However, what you will notice is that the animation will only continue to play while your mouse is hovering over it - causing sharp, ugly visuals. This problem can be fixed with some javascript that adds and removes the animation class on demand.
The windmill example (left) uses a simple timer and boolean system to add, play and remove my animation once it has completed. You can download the source code for the windmill example once you've logged in.
Warning: require_once(assets/elements/footer-dev.html) [function.require-once]: failed to open stream: No such file or directory in /nfs/c01/h06/mnt/45373/domains/dev.bowdenweb.com/html/css/ex/animation/css-animations-demo.html on line 235
Fatal error: require_once() [function.require]: Failed opening required 'assets/elements/footer-dev.html' (include_path='.:/usr/local/php-5.3.29/share/pear') in /nfs/c01/h06/mnt/45373/domains/dev.bowdenweb.com/html/css/ex/animation/css-animations-demo.html on line 235