CSSアニメーションジェネレーター
動きのひな形やキーフレームを調整し、再生して確認します。Webページで使うCSSと、HTMLの使用例を取得できます。
できること
ひな形から動きを調整
登場・退場・回転など12種類から選べます。再生時間や繰り返しを用途に合わせて変えられます。
途中の状態も編集
キーフレームごとに移動量・回転・拡大率・不透明度を指定し、生成した動きを確認できます。
CSSとHTMLを取得
アニメーションのCSSと、同じクラスを付けたHTMLの使用例をコピー・保存できます。
使い方
ひな形を選ぶ
作りたい動きを選び、1回の再生時間を決めます。ひな形を選び直すと、調整した設定も置き換わります。
必要な部分だけ調整
再生の詳細やキーフレームを開き、途中の動き・方向・繰り返しなどを変更します。
生成して再生する
「CSSを生成してプレビュー」で確認します。設定を変更したら、もう一度生成してください。
CSSとHTMLを取得
CSSを適用し、HTMLの要素にtoollet-motionクラスを付けます。HTMLの使用例はCSSと組み合わせて使います。
こんなときに便利
要素が現れる動きを作る
フェードインや下から登場するひな形で、表示の動きと速度を調整します。
ボタンに触れたときの動き
開始条件をホバー・キーボードフォーカス時に変え、操作に反応する動きを作れます。
キーフレームと再生条件の考え方
途中の状態と再生時間
キーフレームの%は1回の再生中の位置です。1秒なら50%は0.5秒の時点です。値の間をどう変化させるかは速度の変化で決まります。
移動・回転・見え方
水平/垂直位置は元の位置からの移動量です。拡大率1が元の大きさ、不透明度0は透明、1は不透明です。
遅延・繰り返し・方向
待ち時間は開始前の1回だけ加わります。有限の合計時間は待ち時間＋1回の再生時間×回数。交互では往復の方向を切り替えます。
再生前後の状態
待ち時間や終了後にどの状態を表示するかを選びます。逆方向・交互の設定によって、再生の最初と最後に使う時点が変わります。
動きを減らす設定
生成CSSは端末の動き軽減設定に対応します。対象のアニメーションを止め、設定した方向と回数に応じた終点の状態を使います。無限再生では最初の1回の終点を使います。
よくある質問
一度だけ再生できますか？
「繰り返し続ける」をオフにし、繰り返し回数を1にしてください。通常のひな形は1回、回転と浮遊は繰り返し続ける設定で始まります。
どの要素にCSSを適用しますか？
HTMLの要素にtoollet-motionクラスを付け、生成したCSSと一緒に使います。HTMLの使用例はボタン要素の断片で、単独で完成したWebページではありません。
キーフレームは何個まで作れますか？
始点0%と終点100%を含めて2〜8個です。追加すると最も広い区間の中間へ入ります。始点・終点は削除できず、%だけが固定です。
設定を変えたらプレビューが消えました。
以前の設定の動きやコードを誤って取得しないよう、設定変更時に結果を消します。もう一度生成すると現在の設定を確認できます。
プレビューが動かないのはなぜですか？
端末の動き軽減が有効な場合は動きを止めます。ホバー・フォーカス時の設定は開始条件も確認してください。別のタブに切り替えるとプレビューは一時停止します。
複数のアニメーションを同じページで使えますか？
生成されるクラス名とキーフレーム名は共通です。別々の動きとして使う場合は、両方の名前をそれぞれ変更し、対応するHTMLにも反映してください。
入力と結果
- 設定
- 12種類のひな形、2〜8個のキーフレーム、再生時間0.2〜60秒。
- 再生
- 遅延0〜60秒、1〜100回または無限、速度の変化・方向・再生前後の状態・開始条件。
- 出力
- CSSとHTMLの使用例。動きだけを定義し、Webページ全体や動画ファイルは作りません。