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 …).

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.