CSSアニメーション生成 (keyframes) アニメーション
30種類以上のCSS @keyframes アニメーションからクリック選択→ライブプレビュー→コード即コピー。フェード/スライド/バウンス/回転/拡大縮小/シェイク等。継続時間・遅延・イージング・繰り返し回数も調整可能。
1.0 秒
0.0 秒
▶
使い方
- 下部の30種類のアニメーションからクリックで選択
- 上部で継続時間・遅延・イージング・繰り返し回数を調整
- 「もう一度再生」ボタンで何度でも確認
- コピーボタンでCSSコードを取得し、自分のサイトの要素に `animation` プロパティを適用
使い方の例
コピーしたCSSをHTMLファイルに貼り付け、対象の要素にクラスを追加するだけで動作します:
<div class="my-element">Hello</div>
<style>
.my-element {
animation: fadeIn 1s ease 0s 1 both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>