Обратите внимание, что в правилах, касающихся анимации SVG, произошло небольшое изменение (я также обновил исходный пост, чтобы отразить это). Изначально мы разрешали анимацию SMIL в SVG, но оказалось, что они подёргиваются, так как браузер приостанавливает анимацию этого типа во время выполнения JavaScript.
Поэтому теперь рекомендуется использовать в SVG только анимацию трансформации (transform) и прозрачности (opacity) через CSS, так как они не блокируются JS.
Если вы посмотрите на SVG от @ばコン выше, то увидите отличный пример допустимой анимации:
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
Также будьте внимательны и давайте своим анимациям уникальные имена, чтобы они не конфликтовали с другими анимациями в Discourse (названия вроде «blink», «rotate», «fade» и т. д. могут быть слишком общими). Использование префикса, например unique-, — отличный способ избежать этого.