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
- In the following example we will click the red ball.
- After a 2 second delay, the red ball will turn green and bounce a few times.
- 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.
forwards – the last @keyframe is displayed once the animation is complete.
http://css3animator.com/examples/animation-fill-mode/forwards.html
- In the following example we will click the red ball.
- After a 2 second delay, the red ball will turn green and bounce a few times.
- 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.
backwards – the first @keyframe is displayed only for the amount of time that the @keyframe animation is delayed. You MUST have a non-zero, positive value for the -webkit-animation-delay property.
http://css3animator.com/examples/animation-fill-mode/backwards.html
- In the following example we will click the red ball.
- The red ball will turn green and hold for a 2 second delay.
- Then it will bounce a few times.
- 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.
both – the first @keyframe is displayed only for the amount of time that the @keyframe is delayed. Once the animation has completed it’s final iteration, the last @keyframe is displayed. You MUST have a non-zero, positive value for the -webkit-animation-delay property.
http://css3animator.com/examples/animation-fill-mode/both.html
- In the following example we will click the red ball.
- The red ball will turn green and hold for a 2 second delay.
- Then it will bounce a few times.
- 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”!
You can also look at the Sencha Animator :
http://www.sencha.com/products/animator/
Sencha Animator is great. A bit rough around the edges, but I definitely see myself using this (or Adobe’s) app in the very near future. Although I’m not happy about the clunky code it produces. Thats the trade off with most wysiwyg’s
None the less, marking up your animation by hand is very tedious. In what way do you want css3 animators to organize their code and what makes the wysiwyg’s code clunky?
Is there anyway to get around pre-loading if an animation starts automatically when the page loads rather than been applied on a mouse click? -webkit-animation-delay doesnt help as the image is shown at its normal location before moving off? See http://www.imagexyapp.com as an example.
try positioning the object off the viewable area and applying an animation-delay. add the original X/Y positioning values into the first @keyframe declaration. When the timer on the delay is up and your animation starts, your object ‘should’ be popped into the right spot.
Is there a way to reset the animation so that it will play again? I tried removing the go class from the body and re-adding it on every click but that doesn’t work.
chris coyier has an excellent article on just this subject – http://css-tricks.com/restart-css-animation/
Well, I did get it to work finally with a little javascript by using setTimeout() am wondering if this is the best way to do it.
function go () {
if ($(“body”).hasClass(“go”))
{
$(“body”).removeClass(“go”);
}
setTimeout(function () {
$(“body”).addClass(“go”);
}, 1);
}
if (window.jQuery)
{
$(document).ready(function() {
$(“#stage”).click(function() {
go();
});
})
}
Ah, my method is indicated on the site you sent me to. Internet Lag…
First time coming here, nice sharing for this “how to control your css3 animations”.
It doesn’t work in Firefox