ローディングdiv図形回転3keyframeでbox-shadowを設定した例。loading...上:line-height、text-shadow、letter-spacing。下:text-indent、letter-spacing。文字にアニメ演出2疲れ目でぼやけます光って主張します上:color:rgba()とtext-shadowで文字をかすませる演出。下:color:rgba()とtext-shadowで文字を光らせる演出。上:scale(1)とscale(2)で文字拡大縮小アニメ。下:perspectiveとtranslateZで文字拡大縮小アニメ。アニメは8s、0-10-20%で文字色が変化。アニメ1個/spanごとに遅延2spanが8個。アニメは8s、0-10-20%で背景色が変化。アニメ1個/spanごとに遅延3spanが8個。ローディングアニメ4div1個+before+box-shadowのkeyframe1個でローディング。※IE10は疑似要素で作っている斜めの影アニメが表示されない。ローディングのコマ表示10のアニメの0%,25%,50%,75%,100%をdivに指定した例。※このスタイルで各キーフレームを作りdivをbeforeよりも0.5s早めにanimationで動作させている。ローディングアニメ4(改)疑似要素のanimationが使えないieのために、divを2個使用。円の表示アニメの種明かしLoading背景グレーから別の色に...3つのbefore&afterでアニメアニメーション部品の考察spanタグやdivタグを大量に並べたHTMLソースを書いて、cssでアニメさせたローディングイメージを演出するぐらいなら、gifアニメ1個で簡単にできるのでは?などと言われがちな、今日この頃。そもそもローディングをさせるのは、ページ内の大量の画像や逐次ページの記事をスクロールさせた時に読み込ませるなどのために、「ちょっとこれ見て待っててね」という演出で使うものかと思いますので、ローディングイメージが重い場合は本末転倒なことになるかもしれません。指定自体をアニメで表現する方法などが考えられますのでとりあえず作ってみました。HTMLソース上に最初は存在しない状態にすることもできますので、javascriptでソース作成するためのひな形と割り切れば、リストやキャプション、ラベルタグ等で言い訳的に意味づけする必要もないかと思ったりもしてます。影アニメがうまく動かない問題については、現在少し忙しいので、調査保留中です...。主なcssやテクニックdata-...独自データ属性(又は、カスタムデータ属性)。要素に自分で設定した属性名と値を指定することができる仕様。