Question

I have a simple animation (only for Safari in this example):

h1 {
    -webkit-animation: moveDown 1s ease-in-out;
}

@-webkit-keyframes moveDown {
    0% {-webkit-transform: translateY(-20px); opacity: 0;}
    100% {-webkit-transform: translateY(0px); opacity: 1;}
}

In the latest Safari (5.1.5) it works just fine.

But by accident I viewed the example in an older Safari (5.0.6) and saw nothing. The h1 was gone.

By kind of triggering eather by adding a none-rotate (opacity & animation works):

@-webkit-keyframes moveDown {
    0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;}
    100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;}
}

or start at 1% (opacity doesn’t work but animation):

@-webkit-keyframes moveUp{
    1% {-webkit-transform: translateY(-20px); opacity: 0;}
    100% {-webkit-transform: translateY(0px); opacity: 1;}
}

it worked again.

This now leads me to two serious questions:

1. Is there anything I did wrong in the first example?
2. Is there a known bug in older version of Safari which I should treat different?

Cause:

I don’t mind if you can’t see the animation in non-supporting browsers (it’s just a nice add on) but it would be daring to not know when your animated element just doesn’t show up anymore.

How could I be able to use animations in general as an add-on it without worrying?

If anybody askes for a fiddle: I tried recreating it. But here’s another interesting thing: The exact same code will not have any effect in the old Safari in jsfiddle. Nor it animates or dissapears.

Edit:

I’m just seeing that the h1 is not dissapearing anymore with the original code (I can’t reconstruct it) but doesn’t do any animation eather. It just works with one of the described triggers.

JS-FIDDLE:

Here a working fiddle with the two examples.

Answer 1

I don’t have an old version of Safari handy, but I recall playing with animations in older versions and encountered these types of bugs. I worked around them by putting the ‘end state’ in the selector, e.g. p {opacity: 1} http://jsfiddle.net/pkFaT/