原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

Transition ソース作成ツール

ソース作成用データ入力フォーム

transition-property :

ここに表示されるプロパティは、W3Cサイト内の Transitions の Animatable cssプロパティ一覧を参考にしています。
CSS Transitions Module Level 3
transition-duration :

(参考:1s=1000ms)

transition-timing-function :

(参考:css3研究 / transition-timing-function)

transition-delay :

(参考:1s=1000ms)

その他指定
ベンダープレフィックス選択

時間変化のtransitionのソースを作成

ベンダープレフィックスはwebkit、moz、ms、o

top > Transition ソース作成ツール

各項目タイトルのチェックボックス

各項目にチェックを入れると、それぞれの値を入力する指定になります。チェックを外すと入力しない指定となり、ソース出力には記述されなくなります。

各入力フォーム

入力フォームの内容が各プロパティの値としてソース記述されます。(複数指定はカンマ区切り)

未入力(値クリアー等で入力内容を消した)状態の場合はチェックを外した時と同じ動作にしています。

-propert(プロパティ名):一般的には「all」一個だけの指定が簡単。タイミングや秒数を変化させたい場合に個別のプロパティ名をカンマ区切りで複数指定。

-duration(変化時間):数値+時間の単位(s,ms等)

-timing-function(タイミング):一般的にデフォルト指定はease。

-delay(遅延時間):数値+時間の単位(s,ms等)

【入力支援】

【入力支援】にあるリンクボタンをクリックすると、直上のフォームに文字が入力され、フォーカスがフォームに来るようになっています。特にカンマ区切りで複数入力する場合は、[,(カンマ)]をクリックして数値等をクリックすると便利です。
フォーム内の入力値を消したい場合は[値クリアー]をクリックします。

プロパティ名の場合は、[B-C][F-P][R-Z]の各フキダシをクリックすると、それぞれの頭文字のプロパティ名入力リンクボタンが表示されます。

ベンダープレフィックス

チェックを入れると、ベンダープレフィックスが頭に付いたソースが追加されます。

その他指定「1行の簡易表示で作成」

チェックを入れると、1行記述(ショートハンドプロパティ記述)でソースを出力します。

入力内容で作成

クリックすると、フォームに入力された内容でソースが出力されます。

全入力を初期化

クリックすると、フォームの入力等を初期化します。

出力ソースを全選択

クリックすると、出力されたソースを全選択状態にします。(ので、コピーしてどっかに貼りつけます)

出力ソース表示のテキストエリア

[入力内容で作成]をクリックすると、ソースが表示されます。

初期状態は「ここにソースが表示されます」の文字が表示されています。

コピーライト

Copyright © Haramori Laboratory of Information Technology 2015 All rights reserved.

update 2015.04.21
HELP1 HELP2 HELP3 HELP4 HELP5
カテゴリMENU
お問い合せ