 |
| スタイルシートだけで回転し続ける画像 |
日頃モニタ画面でよく見かける "回転し続ける画像" といえば、「ダウンロード中」とか「同期中」「考え中」など、そのコンピュータの処理状況が継続する間という目に見えない時間を可視化するために用いられています。
なのでたまには何かを待つという時間を気にかけることなく、ただ単に「回してみたかったから」「回せるんだから」という視点で、日常では "回す側" に位置していて回ることも回されることもないレコードプレーヤーの画像を回してみました。
しかもタイトルの文字通り、Flash や Javascript を使うことなく、スタイルシートだけで。
この「画像を回転させ続けるスタイルシート」のサンプルは、次の通りです。
.spin_infinite { /* keyframes に任意の名前を付ける */ -moz-animation-name: 'rotate1'; -webkit-animation-name: 'rotate1'; animation-name: 'rotate1'; -goog-ms-animation-name: 'rotate1'; /* 1動作(ここでは1回転)あたりの秒数 */ -moz-animation-duration: 4s; -webkit-animation-duration: 4s; animation-duration: 4s; -goog-ms-animation-duration: 4s; /* 動作の向き、初期値はnormal 、逆再生は alternate */ -moz-animation-direction: normal; -webkit-animation-direction: normal; animation-direction: normal; -goog-ms-animation-direction: normal; /* 動き方 linear, ease, easein, ease-out, ease-in-out */ -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -goog-ms-animation-timing-function: linear; /* 動作 (ここでは回転) の回数を数値で指定、無限ループは infinite */ -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -goog-ms-animation-iteration-count: infinite; } @-webkit-keyframes 'rotate1' { from { /* 最初の回転角 */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -goog-ms-transform: rotate(0deg); } /* 1動作の最後 ( 1duration 後) の回転角 */ to { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transform: rotate(-360deg); -goog-ms-transform: rotate(-360deg); } }
このスタイルシートと合わせて、回転させたい画像の img タグ内に「 class="spin_infinite" 」を追記すると、その画像が回転し続けます。
自分が HTML で web ページを作り始めた1990年代後半の「スタイルシートで文字や画像の配置などを指定できるのは画期的! 」と喜び勇んでいたのは、遥か遠い日の想い出ですね。
以上、できるというのならやってみよう! という試みでした。
