ツールを実行
このツールは、ウェブ制作やフロントエンド開発で使用するCSSキーフレームアニメーションコードを素早く作成できるオンラインジェネレーターです。アニメーション名、再生時間（秒）、イージング関数、再生方向、終了後のスタイル状態（フィルモード）を指定することで、要素を下から滑らかにフェードインさせるCSS定義を自動生成します。生成されるキーフレームコードでは、開始時（0%）に不透明度0かつ下方向に20ピクセル移動した状態から、終了時（100%）に不透明度1の通常位置へと移動するトランジションが定義されます。同時に、対象要素にそのまま適用できるanimationプロパティの一括指定コードも出力されるため、HTMLやスタイルシートに貼り付けるだけで簡単に導入できます。ランディングページのファーストビュー演出、カード要素の表示アニメーション、ボタンや通知バナーの強調表示など、多彩なウェブ演出のプロトタイピングやスタイル調整を効率化したい場面で幅広くご活用いただけます。
使い方
- アニメーション名を入力します（未指定の場合は標準の名前が適用されます）。
- アニメーションの再生時間を秒単位の数値で指定します。
- イージングの種類、再生方向、終了後の状態（フィルモード）を設定します。
- 作成を実行すると、結果表示エリアにキーフレームとスタイルプロパティのCSSコードが表示されます。
- 生成されたコードをコピーし、ウェブサイトのスタイルシートに貼り付けて利用します。
使用例
- アニメーション名を「fadeInUp」、再生時間を「2」、イージングを「ease-in-out」に設定して、2秒かけて下から浮き上がるキーフレームアニメーションのCSSを作成する例。
- 再生時間を「0.5」、再生方向を「alternate」、フィルモードを「forwards」に設定して、反転再生と終了状態の維持を含むCSSコードを作成する例。
よくある質問
アニメーション名を空欄にして実行した場合はどうなりますか？
アニメーション名を指定しない場合でも、自動的に規定の名称が割り当てられてCSSコードが出力されます。
再生時間の単位はどのように扱われますか？
入力された数値の後ろに秒を表す単位（s）が付加されてCSSコードが組み立てられます。
生成されるキーフレームの動作内容は何ですか？
開始時（0%）に不透明度0および20ピクセルの下方向オフセット、終了時（100%）に不透明度1および通常位置となるフェードイン動作のコードが生成されます。