ローディングアニメーションのサンプル(随時追加)

ローディングアニメーションのサンプル(随時追加)

ローディングアニメーション(?)作ってみた

ローディングで使えそうなアニメーションを作ってみる。できるだけcssで実装。難しい場合はjs(jquery)で実装する。

少しづつだけど追加していけたらなぁと思う。

解説とかおすすめ参考サイトとかを要所要所入れつつ。。。

 

:nth-child

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

上のローディングでは箱9個をそれぞれ拡大縮小するので、div要素9個作る。9個のdiv要素を囲む親要素も作っておく。

div.loading div:nth-child(数、式)

兄弟要素(div.loading内のdiv要素)のうち何番目の要素に適用させるか指定することができる。

逆に1,5,9番目以外を指定したいときはnotを使う。

div.loading div:not(:nth-child(-4n+9))

animation

CSS アニメーションCSS Animationsは CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

CSS アニメーション – CSS: カスケーディングスタイルシート | MDN

animationとkeyframesを使うことでアニメーションを実装することができる。

要素 {
    animation-name: 実行したいkeyframesの名前;
    animation-duration ...(略)
}

@keyframes 任意の名前 {
    0%{cssプロパティ:値}
    100%{cssプロパティ:値}
}

 

 

transform-style

初期値だと2D表示のままになってしまうので、transform-style: preserve-3d;を記述。

transform

移動、拡大、伸縮、傾斜をtransformプロパティで加えることができる。

今回は3D表示ということで、Z方向の値を多用した。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA