Thomas Fuchs wrote an excellent article about how to animate the timebemoney.com mascot, Captain track! He provides some pro-tips on how to cut and slice graphics in order to animate them realistically with CSS3. There is even a brief introduction into creating animated .gif’s with photoshop.

Definitely worth the read, Go Check it out!

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

When using -webkit-transform, be sure to use the translate3d(x,y,z) syntax, instead of using translate(x,y).

It’s weird, but you can’t “tap” into hardware acceleration unless you use the 3D syntax. Thank Matteo Spinelli for bringing us this simple ‘css3-flicker-fix’.

Now please, don’t just stop here. Read through the articles below and see how some of todays top developers optimize their code for iPads and iPhones.

• You Shall Not Flicker!

  Matteo Spinelli is doing some incredible work on mobile optimizations with his iScroll script for Mobile Safari

• Making an iPad HTML5 App & Making It Really Fast

  Get an in-depth look at the speed optimizations for everytimezone.com by Thomas Fuchs. (Check out his Scripty too!)

• Writing HTML and CSS for Mobile Safari. Just the Same Old Code?

  Ben Barnett explores CSS positioning and its effects on smooth animation.

UPDATE: Someone that listens to the Forrst Podcast says they mentioned this post and some of the guys on the podcast dismissed it as not working. It works. There was a 2 second delay applied to the animation which I have removed

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.

DISCLAIMER -Sorry, these example’s will only work in -webkit browsers like Chrome and Safari.

Syntax and Parameters:

-webkit-animation-fill-mode: none/backwards/forwards/both;

Values:

• none – The effects of the animation are apparent only during the defined duration of the animation.
• forwards – The animation’s final keyframe continues to apply after the final iteration of the animation completes.
• backwards – The animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay.
• both – The animation’s initial keyframe is applied as soon as the animation style is applied to an element, and the animation’s final keyframe continues to apply after the final iteration of the animation completes. The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay.

I’ll give it to you in layman’s terms:

none – you only see the effects of the animation while the @keyframes are running.
http://css3animator.com/examples/animation-fill-mode/none.html

1. In the following example we will click the red ball.
2. After a 2 second delay, the red ball will turn green and bounce a few times.
3. It will then return to its starting position and change back to red.

Because -webkit-animation-fill-mode:none; has been applied to it. It returns to its original state before the animation.

1. In the following example we will click the red ball.
2. After a 2 second delay, the red ball will turn green and bounce a few times.
3. It will then remain at the bottom position and green color .

Because -webkit-animation-fill-mode:forwards; has been applied to it. It will display the last @keyframe once the animation is complete.

1. In the following example we will click the red ball.
2. The red ball will turn green and hold for a 2 second delay.
3. Then it will bounce a few times.
4. It will then return to its starting position and change back to red.

Because -webkit-animation-fill-mode:backwards; has been applied to it. It will display the first @keyframe during the animation delay.

1. In the following example we will click the red ball.
2. The red ball will turn green and hold for a 2 second delay.
3. Then it will bounce a few times.
4. It will then remain at the bottom position and green color .

Because -webkit-animation-fill-mode:both; has been applied to it. It will display the first @keyframe during the animation delay. Then it will display the last @keyframe once the animation is complete.

So there you have it. Still, I’d hate to leave you with just some boring bouncing circles…

I’ve created a little css3 cartoon to show the -webkit-animation-fill-mode: forwards; property in action. Check out the “CSS3 Poo Fly”!