safari

Keyframe animation is not starting in Safari

Lately i was running into an Safari issue - what happens really often lately, i really start to fall in love with this "amazing" piece of software.

Whatever - the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

This is working great in all current major browser - except Safari (and of course IE .. but .. who cares).

The simple workaround is: Add the animation-name in the "moment" you triggered the animation-play-state: running before. So you have to implement it this way:

.play{
    animation-play-state: running;
}
.my-animation-name.play{
    animation-name: 'my-animation-name';
}

Maybe this way we could also skip the animation-play-state property completely, but i've not tried though.

Subscribe to RSS - safari