アニメーション部品の考察

spanタグやdivタグを大量に並べたHTMLソースを書いて、cssでアニメさせたローディングイメージを演出するぐらいなら、gifアニメ1個で簡単にできるのでは？などと言われがちな、今日この頃。

そもそもローディングをさせるのは、ページ内の大量の画像や逐次ページの記事をスクロールさせた時に読み込ませるなどのために、「ちょっとこれ見て待っててね」という演出で使うものかと思いますので、ローディングイメージが重い場合は本末転倒なことになるかもしれません。

cssでローディングイメージを作る場合、それっぽい図形を描いて回転させる方法や、box-shadow 指定自体をアニメで表現する方法などが考えられますのでとりあえず作ってみました。（→サンプル1参照）

span・div タグを大量配置するのは HTML5 ではあまり推奨されないのではないかと思いますが、javascript で innerHTML変更して HTMLタグソースを書き換えたりして、一時的に画面表示するだけなら HTMLソース上に最初は存在しない状態にすることもできますので、javascriptでソース作成するためのひな形と割り切れば、リストやキャプション、ラベルタグ等で言い訳的に意味づけする必要もないかと思ったりもしてます。(→ サンプル3はわざと span・div 増殖状態でアニメの遅延連携動作の実験として作ってみたものです)

また、このページでの、IE10の befor after の影アニメがうまく動かない問題については、現在少し忙しいので、調査保留中です…。

主なcssやテクニック

data-…

独自データ属性(又は、カスタムデータ属性)。すべての HTML 要素に自分で設定した属性名と値を指定することができる仕様。

content:attr(属性名)

属性名の値を表示

position

ボックスに背景画像の時は absolute を指定してtop,leftなどで位置指定

top

top位置

left

left位置

animation

アニメを指定するcssプロパティ

@keyframes

アニメのキーフレーム指定

transform

要素の変形を指定するcssプロパティ

ページトップへ