生成AIが書いたCSSアニメーションが、Studioにそのまま持ち込めない理由

生成AIに「ホバーで色が変わるボタンを作って」「スクロールしたらふわっと現れる演出を入れて」と頼むと、CSSの@keyframesやtransitionというコードを使ったアニメーションが返ってきます。

このコードをそのままStudioに持ち込もうとしても、動きの部分だけはうまく再現されません。この記事では、その理由と、実務的な対処のしかたを整理します。

理由：Studioは「独自の仕組み」で動きを表現している

生成AIが書くCSSアニメーションは、@keyframesで変化の過程を細かく指定したり、transitionで「このスタイルが変わったら、これくらいの時間をかけてなめらかに変化させて」と指定したりする書き方です。

一方Studioは、「通常時のスタイル」と「条件（ホバー・出現時など）を満たしたときのスタイル」の差分を、専用の設定画面（条件付きスタイル）で管理する仕組みを採っています。見た目の結果は似ていても、コードとしての構造がそもそも違うため、@keyframesやtransitionをそのまま貼り付けても、Studio側では意味のあるものとして扱われません。

静止したデザインは持ち込める、動きの部分だけ作り直しが要る

色・余白・配置・文字といった静止したデザイン部分は、変換ツールなどを使ってStudioのネイティブ要素として持ち込める場合があります。動きが無い状態のレイアウトを土台として持ち込み、そこにStudio側で改めてアニメーションを設定し直す、という分担で考えると進めやすくなります。

生成AIとStudioの組み合わせ方については、生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較でも詳しく扱っています。

作り直すときの考え方

生成AIが書いたCSSを読み解いて、「どんな条件で」「どのスタイルが」「どう変化しているか」を整理すると、Studio側で再現しやすくなります。

• どのタイミングで動くか（ホバー・出現時など）を確認する
• 変化前と変化後、それぞれのスタイル（色・大きさ・位置など）を書き出す
• 変化にかかる時間や、動き始めるまでの遅延があれば、あわせてメモしておく

まとめ

生成AIが書いたCSSアニメーションがStudioでそのまま動かないのは、コードの間違いではなく、動きを表現する仕組みそのものが異なるためです。静止したデザインと動きの部分を分けて考え、動きの部分だけはStudio側の条件付きスタイルで作り直す、という前提で進めると迷いにくくなります。

Studioの条件付きスタイルの基本はStudioのアニメーション入門で扱っているので、あわせてご覧ください。