CSSで@keyframeを書くと保存されない

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

DAWN 15.2テーマのカスタムCSSで@keyframesを使用したアニメーション定義を保存しようとすると、「エラーを修正してカスタムCSSを保存します」というエラーが発生し、保存できない問題が報告されました。

原因:
カスタムCSSエディタでは@keyframesの追加がサポートされていない仕様。

解決策:

  • コードエディタから直接base.cssなどのCSSファイルに追記することで回避可能。

結果:
質問者は回答を受けて解決方法を理解し、カスタムCSSの制限について学んだことを確認。問題は解決済み。

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

DAWN:15.2使用

カスタムテンプレートを作成して、ページを当て込みました。

オンラインストア＞カスタマイズから、作成したカスタムテンプレートを選択して、

カスタムCSSに色々と記述していたのですが、@keyframeを書くと「エラーを修正してカスタムCSSを保存します。」というエラーが発生して、保存ボタンが押せません。

コードは以下のように書いています。

 
.anim-box.fadein.is-animated {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

どなたか原因がわかる方がいらっしゃいましたらご教示いただきたいです。

2

@uf2 様

カスタムCSSに@keyframesを追加することができない様です。

対応するには、コードを編集からbase.cssなどにcssを追記することで回避できるかと思われます。

ご参考まで。

（キュー小坂）

3

ご回答いただきありがとうございます。

CSSから追加はできないとのこと、勉強になりました。ありがとうございます！