safari

Keyframe animation is not starting in Safari

Lately i was running into an Safari issue - what happens really often in the last time, i really fell in love with this piece of ****.

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 every current major browser - except Safari (and of course IE .. but .. who still 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';
}

Subscribe to RSS - safari