CSSキーフレームアニメーションジェネレーター
CSSキーフレームアニメーションジェネレーターでは、12種類の既製スタイル（フェードイン/アウト、上下左右4方向からのスライドイン、ズームイン/アウト、バウンスイン、回転イン、X軸/Y軸での反転）からアニメーションタイプを選び、継続時間・遅延・タイミング関数・繰り返し回数を調整できます。ライブプレビューと再生ボタンも備えています。完成した@keyframesルール一式と、そのまま使えるアニメーション用クラスをコピーできます。生成処理はすべてブラウザ内で行われ、サーバーへのアップロードは一切ありません。
デザイン・CSSツール ブラウザ内で完結
コードはすべてブラウザ内で生成されます — サーバーに送信されることは一切ありません。
CSSコード
@keyframes uddatakAnim {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-box {
animation: uddatakAnim 800ms ease-out 0ms 1;
}よくある質問
はい、@keyframesとanimationプロパティは特別なベンダープレフィックスなしで、すべてのモダンブラウザに対応しています。