Animation ソース作成ツール
top > Animation ソース作成ツール
各項目にチェックを入れると、それぞれの値を入力する指定になります。チェックを外すと入力しない指定となり、ソース出力には記述されなくなります。
入力フォームの内容が各プロパティの値としてソース記述されます。（複数指定はカンマ区切り）
未入力（値クリアー等で入力内容を消した）状態の場合はチェックを外した時と同じ動作にしています。
-name（アニメ名）：任意の文字列。複数のアニメを指定する場合は、カンマ区切りで複数指定。
-duration（変化時間）：数値+時間の単位（s,ms等）
-timing-function（タイミング）：一般的にデフォルト指定はease。
-delay（遅延時間）：数値+時間の単位（s,ms等）
-iteration-count（繰り返し回数）：ずっと繰り返す場合は「infinite」。回数指定する場合は数値。
-direction（反転再生設定）：入力支援にあるどれか。[alternate:逆方向のアニメーションを毎回実行][normal:順方向のアニメーションのみを毎回実行]
以下はOpera・Safariで未サポート[reverse:逆方向のアニメーションも毎回実行][alternate-reverse:初回アニメは逆方向、次は順方向、を繰り返す。]
-fill-mode（終了時の状態）：入力支援にあるどれか。 [none:アニメ実行前や実行後に適用されない][forwards:最後に適用されたキーフレームの指定を維持。通常、100%（to） キーフレーム ※-directionが「alternate」で-iteration-countが偶数の場合は0%（from）キーフレーム][backwards:0%（from）キーフレームで定義された値を適用][both:forwards、backwardsの両方の規定に従う]
-play-state（再生/停止）：入力支援にあるどれか。pausedにするとアニメは停止状態になる。
【入力支援】にあるリンクボタンをクリックすると、直上のフォームに文字が入力され、フォーカスがフォームに来るようになっています。特にカンマ区切りで複数入力する場合は、[,(カンマ)]をクリックして数値等をクリックすると便利です。
フォーム内の入力値を消したい場合は[値クリアー]をクリックします。
チェックを入れると、ベンダープレフィックスが頭に付いたソースが追加されます。
チェックを入れると、1行記述(ショートハンドプロパティ記述)でソースを出力します。
クリックすると、フォームに入力された内容でソースが出力されます。
クリックすると、フォームの入力等を初期化します。
クリックすると、出力されたソースを全選択状態にします。（ので、コピーしてどっかに貼りつけます）
[入力内容で作成]をクリックすると、ソースが表示されます。
初期状態は「ここにソースが表示されます」の文字が表示されています。
Copyright © Haramori Laboratory of Information Technology 2015 All rights reserved.