無料ツール
日本語
CSSアニメーションの作成
CSSアニメーションの作成 — データを入力し、形式や内容を確認. 入力ガイド: 方式, 秒. 登録不要.
登録不要
ツールを読み込み中…
使い方
- 1入力ガイド: 方式, 秒.
- 2ツールを実行して結果を確認してください。
- 3結果をコピー / 結果をファイルに保存.
使う前に
例で出力形式を確認し、原本を別に保管。変換した値・空白・改行を確認してから使ってください。
広告配信で通信情報を処理する場合があります。パーソナライズはプライバシー選択に従います。 プライバシー（英語）
実際の入力と出力の例
実際のエンジンに以下の例を入力した結果です。個人の入力や保存作業は使いません。ツールの例読込で同じ入力を確認できます。
入力例
| 項目 | 値 |
|---|---|
| 方式 | フェードイン |
| 秒 | 1 |
結果例
@keyframes example {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: example 1s ease both; }
@media (prefers-reduced-motion: reduce) {
.element { animation: none; }
}入力条件
以下は入力検証の許容範囲であり、すべての値が現実的・適切だと保証するものではありません。
- 方式: 選択可能な値: フェードイン / スライドイン / 回転