SVG 애니메이션에 대해 허용하는 사항이 조금 변경되었음을 유의해 주세요 (OP도 이를 반영하여 업데이트했습니다). 원래는 SVG에서 SMIL 애니메이션을 허용하고 있었지만, 브라우저가 JavaScript 실행 중 이러한 유형의 애니메이션을 일시 중지하기 때문에 버벅거림이 발생하는 것으로 나타났습니다.
따라서 JS에 의해 차단되지 않는 CSS transform 및 opacity 애니메이션만 SVG에서 사용하도록 권장합니다.
위에서 @ばこん 님의 SVG를 살펴보면… 허용되는 애니메이션의 좋은 예시를 보여줍니다:
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
또한 Discourse의 다른 애니메이션과 충돌하지 않도록 애니메이션에 고유한 이름을 부여하는 데에도 주의해야 합니다(“blink”, “rotate”, “fade” 등의 이름은 너무 일반적일 수 있습니다). unique-와 같은 접두사를 사용하는 것은 이를 피하는 좋은 방법입니다.