WEBEXPEDITION18 Never Stop The Exploring

CSS animations are becoming quite popular and I decided to compile a list of useful resources and tutorials for those that haven’t spent that much time with them. Here you’ll find the main guidelines and tips on how to take the first steps with it.
Get ready to step in the world of CSS animations and learn how to apply them to your own sites.

Using CSS3 Transitions, Transforms and Animation

These demos are showing of CSS transitions, transforms (2D and 3D) and animations. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them.

Enhance Your Sites with CSS3 Animations

This article provides an introduction to CSS3 animations and an explanation of the syntax involved. We will then take a look at a more advanced use of CSS animations before finishing with some “real world” animation ideas and how you can apply these to your sites today.

The Guide To CSS Animation: Principles and Examples

In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages.

A Masterclass in CSS Animations

From the basics of animation keyframes to expert animation tips that will save you many a headache, Estelle Weyl, web developer and author of HTML5 and CSS3 For the Real World, takes you on a tour of all you need to know to get up and running with CSS3 animations.

CSS Fundamentals: CSS 3 Transitions

This article review the basics of using CSS3 transitions and animations to add an extra layer of polish.

Case Study: Getting Hardboiled with CSS3 2D Transforms

In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

Keyframe Animation Syntax

CSS animations

But you can do a lot more with CSS animations than just create pretty spinners. Since I was fooling around with it anyway, I decided to test how far you can push this, space is the final limit, right?

CSS3 Transition Animations With jQuery Fallbacks

In today’s post, we’ll be taking a look at how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. The benefit of transitions is that unlike JavaScript based animations, they’re hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience.

Create a 404 page with CSS3 animations

WebKit-wizard Trent Walton, founder of Paravel, explains how he built .net’s latest 404 page using CSS3 animations

Ring a Bell with CSS Keyframe Animations

Time to have some more fun with a CSS animation as Tom Kenny going to show us how to realistically animate a ringing bell.

How To Create Customizable Mac Dock With CSS3 Only

In this post Simone D’Amico will show us how to create a customizable Mac like dockbar using only CSS3.

Add cutting-edge visual effects

The list of cutting-edge CSS3 techniques is ever-expanding. Trent Walton and Dave Rupert from Paravel explore how these new properties can be implemented right now

Fight the Flicker! Making Your CSS3 Animation Bomb-Proof

CSS3 Animations have a tendency to ‘flicker’ on Mobile Safari. Luckily, there is an easy solution for it. Thomas Fuchs sums it up best!

How to Control Your CSS3 Animations

Here’s a css3 animation property that you might not know about. The -webkit-animation-fill-mode property. It provides fine-tuned control over your CSS3 keyframe animations.