プレビュー：
ここにデータが出力されます。
貼り付けコード：
このコードをWebページのソースコードに貼り付けてください。
これは何？
文字へのスタイルシートの適用結果を、アニメーションで比較することの出来る JavaScript コードを生成するサービスです。スタイルシートの適用結果を 1 秒間隔で表示します。
スタイルのプレビューと同時に、どのようなスタイルが適用されているのかを上部に表示するため、適用しているスタイルシートの記述とその結果の対応関係が非常に分かりやすいのが特徴です。
想定する用途
Webページ内で、スタイルシートの適用結果の違いを閲覧者に説明するときに利用できます。作成例
フォントのサイズを変えた結果をアニメーションで表示
スタイルシートの font-size の指定値を変更することで、フォントのサイズを変えた結果をアニメーションで表示しています。
プレビュー
こんにちは！
貼り付けコード
<!-- anime css begin --><div id="anime-css-container">こんにちは！<script type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="font-size:10px;\r\nfont-size:11px;\r\nfont-size:12px;\r\nfont-size:13px;\r\nfont-size:14px;".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script></div>
<!-- anime css end -->
文字の色を変えた結果をアニメーションで表示
スタイルシートの color の指定値を変更することで、文字の色を変えた結果をアニメーションで表示しています。
プレビュー
こんにちは！
貼り付けコード
<!-- anime css begin --><div id="anime-css-container">こんにちは！<script type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="color:#000000;\r\ncolor:#111111;\r\ncolor:#222222;\r\ncolor:#333333;\r\ncolor:#444444;\r\ncolor:#555555;\r\ncolor:#666666;\r\ncolor:#777777;\r\ncolor:#888888;\r\ncolor:#999999;\r\ncolor:#aaaaaa;\r\ncolor:#bbbbbb;\r\ncolor:#cccccc;\r\ncolor:#dddddd;\r\ncolor:#eeeeee;\r\ncolor:#ffffff;".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script></div>
<!-- anime css end -->
その他オプション
アニメーション間隔の変更
貼り付けコード内の、「setTimeout(e,1E3)」の 1E3 を変更することで、アニメーションの時間間隔の変更が可能です。単位はミリ秒です。
デフォルトで、1E3 (1000ms) です。
例)
設定値, 意味
2E3, 1フレーム 2 秒（サンプル）
500, 1フレーム 500 ミリ秒（サンプル）
1000/15, 15 fps（サンプル）
適用している style を非表示
貼り付けコード内の、「var f=!0」を「var f=0」(!を削除)とすることで、適用しているスタイルの文字による表示を行わないようにすることができます。（サンプル）
適用している style を説明する文字を変更
貼り付けコード内の、「document.createTextNode("style:"+c[b])」の「style:」の部分を変更することで、適用している style を説明する文字を変更することができます。（サンプル）
文字以外への拡張（上級者向け）
以下のように、タグの id 属性として "anime-css-container" が適用されている部分に、スタイルが適用されます。<div id="anime-css-container">こんにちは！
省略
</div>
従って、この div タグを別のタグに変更すれば、文字以外の要素にも、スタイルシートの適用結果をアニメーションで表示することを拡張することができます。
（サンプル）
生成されるソースコードについての解説
生成されるソースコードについての解説は、以下のページにて行っています。生成コード解説：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.com/2015/02/anime-css-generated-code.html
なお、生成されたコードを見るとわかるように、この動作は生成されたコードのみで行っており、外部から別のスクリプトを読み込むようなことはしていません。
Q&A
Q:アニメーション中に、何のスタイルも適用しないフレームを挟みたいのですが、どうすればよいですか？
A:何のスタイルも適用しないフレームを挿入したい箇所に、空行(何も文字が入力されていない行)を入れてください。Q:1ページ内にこのサービスで生成したコードを複数配置したいのですが、可能ですか？
A:可能です。その他
スタイルシートを使ってアニメーションを表示したい場合、CSS3 が使える環境であれば、スタイルシートだけでアニメーションを行うことができます。
脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）：CSS3アニメーションの基本 (1/3) - ＠IT
http://www.atmarkit.co.jp/ait/articles/1307/04/news002.html
http://www.atmarkit.co.jp/ait/articles/1307/04/news002.html
免責事項
当blogの情報・各種サービスを活用する場合は、各人の判断にて利用してください。当blogの情報・各種サービスを用いて行う一切の行為、被った損害・損失については、一切の責任を負いません。