Beachten Sie, dass es eine leichte Änderung bei dem gibt, was wir für SVG-Animationen zulassen (und ich habe den ursprünglichen Beitrag entsprechend aktualisiert). Ursprünglich erlaubten wir SMIL-Animationen in SVGs, aber es stellte sich heraus, dass diese stottern, weil der Browser diese Art von Animation pausiert, während JavaScript ausgeführt wird.
Stattdessen wird empfohlen, in Ihren SVGs nur CSS-Transformations- und Opazitätsanimationen zu verwenden, da diese nicht durch JS blockiert werden.
Wenn Sie sich die SVG von @ばこん oben ansehen… sie bietet ein gutes Beispiel für eine zulässige Animation:
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
Achten Sie auch darauf, Ihren Animationen eindeutige Namen zu geben, damit sie nicht mit anderen Animationen in Discourse kollidieren (Namen wie „blink“, „rotate“, „fade“ usw. könnten zu allgemein sein). Die Verwendung eines Präfixes wie unique- ist eine großartige Möglichkeit, dies zu vermeiden.