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';
}

Maybe this way we can skip the animation-play-state property completely, as the animation will not start without the name - i've not tried.

Tags 

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
CAPTCHA
Diese Abfrage dient dem Schutz der Seite gegen automatisiertem Spam.