AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
Post on:2024年6月18日
sponsors
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。
生成されたCSSアニメーションはその場ですぐにカスタマイズして微調整も簡単です。テキストは日本語にも対応しており「ジャンプして回転」とかでも平気です。
AI CSS Animationsの利用は簡単、登録など面倒なことは不要です。まずは、下記ページにアクセスします。
あとは、テキストや音声でプロンプトを入力して、「Submit」ボタンをクリックします。「ズームアウトして消える」アニメーションを生成してみました。
テキストは日本語でも大丈夫
CSSアニメーションはほんの数秒で生成されました。
生成されたCSSアニメーション
生成されたCSSは、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@keyframes zoomOutFade { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .zoomOutFade { animation: zoomOutFade 1s ease-out; } |
ページの下部では、生成されたCSSアニメーションのカスタマイズもできます。アニメーションのタイミングを変更したり、配置を変更したり、効果を微調整します。
CSSアニメーションのカスタマイズ
AI CSS AnimationsでどのようなCSSアニメーションが生成できるかは、Directoriesで一覧できます。
ざっと見ただけでも、かなりの数があります。
いくつか個別ページを見てましょう。
前述と同様に、このページでもCSSアニメーションをカスタマイズできます。
sponsors
