keyframes ソース作成ツール
top > keyframes ソース作成ツール
key(%) anime name properties の各ボタンクリックでキーフレーム、アニメ名、プロパティ登録の入力フォームが表示されます。
入力フォームの設定により、[pp_番号]のキーフレームごとのcssプロパティ詳細登録ボタンが表示され、それぞれから値を入力します。
各キーフレームの値を設定後、ベンダープレフィックス選択のチェック等を操作し、入力内容で作成をクリックするとアニメーションのキーフレームソースが作成されます。
このツールでは、以下のようなソースを作成することができます。
@keyframes anime1{
0%{top:0px;left:0px;}
50%{top:100px;left:0px;}
100%{top:100px;left:100px;}
}
@-webkit-keyframes anime1{
0%{top:0px;left:0px;}
50%{top:100px;left:0px;}
100%{top:100px;left:100px;}
}
@-moz-keyframes anime1{
0%{top:0px;left:0px;}
50%{top:100px;left:0px;}
100%{top:100px;left:100px;}
}
@-ms-keyframes anime1{
0%{top:0px;left:0px;}
50%{top:100px;left:0px;}
100%{top:100px;left:100px;}
}
@-o-keyframes anime1{
0%{top:0px;left:0px;}
50%{top:100px;left:0px;}
100%{top:100px;left:100px;}
}
[key(%)]では上例の「0% 50% 100%」等の数値を設定します。
[anime name]では上例の「 @keyframes anime1{ 」の「anime1」の文言を設定します。
[properties]では上例の「top」「left」等のプロパティ名やその並び順などを設定します。
[pp_番号]では各キーフレームでのプロパティ値を設定します。例：[pp_1_1]→「0%{top:0px;left:0px;}」のtop:の「0px」、left:の「0px」等の値
各入力フォーム画面には、クリックすると指定文字をフォームに入力し、フォーカスがフォームに来るようになっています。
フォーム内の入力値を消したい場合は 消 をクリックします。
プロパティ登録の場合、使いそうなcssプロパティのみを入力支援で表示しています。そこにない文言の場合はテキストエリアに直接記述する必要があります。
[ベンダープレフィックス自動付加サンプル]のプロパティはベンダープレフィックスが自動で付加されるものが表示されています。
[ベンダープレフィックス使用しない処理サンプル]は強制的にベンダープレフィックスを付加しない方法、頭に#を記述の入力例として用意しています。
キーフレームを追加
…キーフレームを追加します。（連続入力用で入力フォームは閉じません）
キー数値を変更
…キーフレームの数値を変更し、入力フォームを閉じます。
キーフレームを削除
…キーフレーム削除の確認画面が表示されます。
アニメ名を追加
…アニメ名を追加します。（連続入力用で入力フォームは閉じません）
アニメ名を変更
…アニメ名を変更し、入力フォームを閉じます。
アニメ名を削除
…アニメ名削除の確認画面が表示されます。
プロパティを設定する
…プロパティを設定し、入力フォームを閉じます。
[ 閉じる ]…入力フォーム画面を閉じます。
値クリアー…テキストエリアのデータをすべて消します。
プロパティ値を登録する
…プロパティ値入力フォームのテキストエリアの内容で設定し、入力フォームを閉じます。
登録エリアに値を記述
…プロパティ値入力フォーム画面で、選択したプロパティごとの入力支援用フォームの値をテキストエリアに入力します。
プロパティの登録・変更・削除等を行います。
[設定プロパティ一覧] に、各キーフレームで値を設定するプロパティが表示されます。
※初期には「 top 」のみが設定されています。
properties…クリックするとプロパティ登録・変更・削除の入力フォームが表示されます。
テキストエリアでプロパティを1行ずつ記述、又は入力支援ボタンから入力します。
変更や削除はテキストエリアにある文言を変更・削除で行います。順番を変更する場合はテキストエリア内での上下順をコピペ等で変更します。
テキストエリアに記述したままの文言でソース作成しますので、記述ミスに注意が必要となります。
ベンダープレフィックスを強制的に付加したい場合は頭に@を付けてプロパティ名を記述します。例：@border-image
ベンダープレフィックスを自動付加するものは入力支援の「ベンダープレフィックス自動付加サンプル」にありますが、ベンダープレフィックスを付加したくない場合は頭に#を記述します。例：#border-radius
ボタンクリックでプロパティが登録されます。
ボタンクリックでプロパティ登録せずに入力画面を閉じます。
左にキーフレーム、上にアニメ名が表示された表の並びにあるpp_1_1のタイプの各ボタンをクリックするとプロパティ値入力画面が表示されます。（見た目はプロパティ設定と似てテキストエリアに設定したプロパティが表示された状態となっています。）
タイトル[値入力]の下に
「アニメ名：■ / キーフレーム：●の値入力」
のような記述でクリックしたボタンに対応するアニメ名とキーフレームの値が表示されます。
その下のテキストエリアに直接、値を記述し、
プロパティ値を登録する
をクリックすると、テキストエリアに記述した値が一括で入力され、値入力画面を終了して閉じます。
このボタンを押さずに閉じるを押して入力画面を終了すると、値登録をせずに閉じることになります。
あらかじめ用意してあるプロパティに対応した入力支援ボタンを使って値を入力する場合は、プロパティ名（例：[top]）のボタンをクリックすると、その下に値を一旦記述するためのフォームと入力支援ボタンが表示されます。
入力支援の値等のボタンをクリックすると、値記述用のフォームに文字が表示されます。
例：50pxと入力したい場合は[5][0][px]のボタンを順に押します。
登録エリアに値を記述
をクリックすると、テキストエリアに表示されている対応する「プロパティ名 : 」の右に値が表示されます。
プロパティ値を入力するテキストエリアはプロパティごとに改行して入力する形にしていますので、プロパティ値の区切りとなる[;](セミコロン)は自動で付加します。このため記述は不要となっています。※記述していても適当に処理しています。
チェックを入れると、ベンダープレフィックスが頭に付いたソースが追加されます。
クリックすると、フォームに入力された内容でソースが出力されます。
クリックすると、フォームの入力等を初期化します。
クリックすると、出力されたソースを全選択状態にします。（ので、コピーしてどっかに貼りつけます）
[入力内容で作成]をクリックすると、ソースが表示されます。
初期状態は「ここにソースが表示されます」の文字が表示されています。
Copyright © Haramori Laboratory of Information Technology 2015 All rights reserved.
データ一覧
act_ctg: