CSSキーフレームアニメーションを生成する方法

名前や再生時間などを指定して生成すると、キーフレーム定義と要素への適用宣言を含むCSSテキストを取得できます。入力を省略すると標準値が使われ、空のアニメーション名は myAnimation に置き換えられます。

CSSアニメーションを生成する場面

CSSのキーフレームアニメーションを、名前や再生時間などの設定に合わせて生成したいときに使えるツールです。アニメーション名、時間、イージング、方向、終了後の状態を指定すると、その設定を含むCSSテキストが作られます。入力を省略した場合にも既定値が使われるため、まず標準的なフェードインを確認したい場面にも向いています。

CSSキーフレームアニメーションの生成手順

1. アニメーション名、再生時間、イージング、方向、フィルモードを入力します。必要な項目だけを変更し、ほかを省略することもできます。
2. アニメーション名を省略した場合は fadeIn、再生時間は 1、イージングは ease、方向は normal、フィルモードは none が使われます。名前を入力欄に残したまま空にした場合は、myAnimation に置き換えられます。
3. 入力内容を確認して生成を実行します。成功すると、キーフレームアニメーションと、それを要素に適用する宣言を含むCSSテキストが表示されます。
4. 生成されたテキストを対象のスタイル記述へ取り込み、アニメーション名や時間などが意図した設定になっているかを確認します。再生時間はアニメーション宣言に秒の単位で入ります。

生成結果の読み方と範囲

結果には、キーフレームを定義する部分と、要素にアニメーションを適用する宣言が含まれます。キーフレームの動きは固定されており、開始時は不透明度が0、縦方向に20px移動した状態です。終了時には不透明度が1になり、縦方向の移動量が0になります。そのため、設定を変えても、ここで示される基本の動き自体は別のプロパティや段階へ置き換わりません。

名前や時間などを指定した場合は、その値が宣言に反映されているかを見ます。特に時間は秒として記述されるため、入力した数値と単位を一組で確認してください。アニメーション名を空にした場合は myAnimation が使われ、名前を省略した場合の fadeIn とは結果が異なります。

使用例

通知メッセージを表示するときに、標準設定のフェードインを使ってCSSテキストを作成します。

画面に表示する要素へ標準的なフェードインを付けるため、アニメーション名を省略し、ほかの入力も変更せずに生成を実行します。

生成結果には、キーフレーム定義と要素へのアニメーション適用宣言が含まれます。名前を省略するため、アニメーション名は fadeIn になり、時間は秒の単位で記述されます。

制限事項

• キーフレームの内容は、不透明度と縦方向の移動を2段階で変化させるものに固定されています。任意のCSSプロパティや独自のキーフレーム段階を指定する用途には対応していません。

よくある間違い

• 名前を省略したときの fadeIn と、名前を空欄にしたときの myAnimation を同じだと思うことがあります。省略するのか、空欄を送るのかを確認し、必要なら希望する名前を明示してください。

よくある質問

アニメーション名を省略するとどうなりますか？

省略した場合は fadeIn が使われます。入力欄を空にした場合は myAnimation に置き換えられるため、2つの結果は異なります。

再生時間の単位は何ですか？

指定した再生時間は、アニメーション宣言に秒の単位を付けて記述されます。

キーフレームの動きは変更できますか？

生成されるキーフレームは、開始時の不透明度0と縦方向20pxの移動から、終了時の不透明度1と移動量0へ変化する内容です。別のプロパティや段階を指定できる機能は確認されていません。