Tenga en cuenta que hay un ligero cambio en lo que estamos permitiendo para la animación SVG (y he actualizado el OP para reflejar esto). Originalmente permitíamos animaciones SMIL en SVG, pero resulta que estas tartamudean porque el navegador pausa este tipo de animación mientras se ejecuta javascript.
Así que, en su lugar, la recomendación es usar solo animaciones de transformación CSS y opacidad en sus SVG, ya que estas no son bloqueadas por JS.
Si echa un vistazo al SVG de @ばこん de arriba… proporciona un buen ejemplo de una animación permitida:
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
Además, tenga cuidado de dar a sus animaciones nombres únicos para que no entren en conflicto con otras animaciones en Discourse (nombres como “blink”, “rotate”, “fade”, etc., podrían ser demasiado genéricos). Usar un prefijo como unique- es una excelente manera de evitar esto.