Discourse のスプラッシュアニメーションを Pulse アニメーションに置き換えたいです。（codepen でアニメーションを確認してください）
どうすればよいですか？
わかりませんが、別の点を提起したいと思います。ユーザーがスプラッシュアニメーションを目にする場合、見た目よりも大きな問題があります。そして、Googlebotがそれを見て、もう少し良いスコアを付けたとしても、見た目は気にしません 
私の言いたいことは次のとおりです。
- アニメーションを変更する方法は重要ではありません
- Discourseの応答が遅いすべての問題（主にサーバーレベル）を修正することが重要であり、そのアクセルに対するソリューションにはサポートが必要になる場合があります。
…最後の2回のアップデート/アップグレード以降、スプラッシュは見ていません。これは、Discourseが以前よりも速くなったことを意味します。
「いいね！」 1
実際の問題はサーバーの問題などではありません。私はスリランカ出身です。最近、私たちは大規模な経済危機に陥っています。経済危機のため、当局は燃料発電所の管理ができないため、停電を開始しています。これらの停電により、通信会社はバッテリーの消費電力を節約するためにインターネットサービスの速度を低下させています。そのため、最近のインターネット速度は非常に遅いです。
「いいね！」 5
スリランカの状況は確かに悪いですね。あなたのケースは例外です。もしあなたの主な視聴者もスリランカ出身であれば、なおさらです。
誰かが正しい方向へ導いてくれることを願っています。しかし、私の知る限り、簡単に変更することはできません。
「いいね！」 4
ありがとう、相棒。どうやるか見てみよう。
「いいね！」 1
テーマから編集することはできないと思います。erbファイルを編集する必要があるためです。具体的には、このファイルです：discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
スプラッシュスクリーンは、Discourseアプリの大部分がロードされる前にロードされるため、これをカスタマイズ可能にするのは非常に複雑になるのではないかと推測します。@Johani、それは正確ですか？
「いいね！」 5
その通りです 
スプラッシュは、コアJS/CSSよりも前に読み込まれます。現在の実装はカスタマイズに焦点を当てていませんが、v2ではそうなる予定です。localStorageからスプラッシュ画像を提供することでパフォーマンスをわずかに向上させ、管理者がテーマのhead_tagフィールドにインライン<script>タグを介してカスタム設定を行えるようにする予定です。
この作業のETAは現在ありませんが、テストが必要ですが、計画されています。
「いいね！」 4
テーマのERBスプラッシュテンプレートを直接編集することはできず、スプラッシュはコアCSS/JSより前に読み込まれるため、カスタマイズは困難です。\n\nテーマの通常のCSS/SCSSタブに記述したCSSはコンパイルされ、スプラッシュローダーが表示された後にのみ読み込まれます。そのため、CSSがそこで機能しても、ロード時に元のドットが短時間表示されます。\n\nとはいえ、テーマの**head_tag**にインラインCSSを挿入することで、スプラッシュアニメーションをオーバーライドできます。これにより、スタイルがすぐに適用され、デフォルトのドットのちらつきが回避されます。\n\n\n以下は、デフォルトのドットアニメーションをCodepenにあるようなPulserエフェクトに置き換える例です。\n\nhtml\n<style>\n :root {\n --pulser-color-1: #ffcc00;\n --pulser-color-2: #ff6347;\n }\n #d-splash .dots {\n all: unset;\n position: absolute;\n width: 1.6em;\n height: 1.6em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #d-splash .dots[style*=\"--n:-2\"] { transform: translate(-300%, -50%); }\n #d-splash .dots[style*=\"--n:-1\"] { transform: translate(-150%, -50%); }\n #d-splash .dots[style*=\"--n:0\"] { transform: translate(0%, -50%); }\n #d-splash .dots[style*=\"--n:1\"] { transform: translate(150%, -50%); }\n #d-splash .dots[style*=\"--n:2\"] { transform: translate(300%, -50%); }\n #d-splash .dots::before,\n #d-splash .dots::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid var(--pulser-color-1);\n top: 0;\n left: 0;\n opacity: 0;\n animation: pulse 1s ease-out infinite;\n }\n #d-splash .dots::before {\n border-color: var(--pulser-color-2);\n animation-delay: 0.3s;\n }\n @keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0.6;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.3;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n }\n</style>\n\n注意：ブラウザは<style>タグ内でSCSSを解析できません。そのため、SCSSをインラインで記述することはできません。SCSSの代わりにCSSを使用する必要があります。\n\n結果：\n\n
\n\n\n新しいテーマコンポーネントを作成し、コードの編集をクリックし、Headタグに入力して上記の<style>ブロックを貼り付けます。\n\n保存してサイトをハードリロードで更新すると、更新されたパルスアニメーションがスプラッシュで即座に表示されます。\n\nこれは、Discourseが計画中のv2アップデートでよりカスタマイズ可能なスプラッシュスクリーンを実装するまでの、巧妙な回避策です。
「いいね！」 5