DiscourseのスプラッシュスクリーンをカスタムSVG画像でブランディングする

お知らせ
13

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- のようなプレフィックスを使用することは、これを回避するための優れた方法です。

「いいね！」 4