SQLの窓

2015年11月16日


CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

snowstorm.js という、雪を降らせるだけの スクリプトがあるのですが、少しカスタマイズして雪のキャラクタに ❄ を使って、一つ一つ廻すデモを作ってみました。

snowstorm の一つ一つを廻すデモ


▼ 以下本編

重要なのは、3つの部品に注目する事です。

@keyframes

これは、どのようなアニメーションをするかの定義で、根本的なものです。簡単な記述では、最初と最後を記述して( from to または 0% 100% ) としてその間を CSS に補完させます。

定義は、一つあればどこからでも参照できます。その際、コンテンツの animation で、@keyframes で指定した名前を指定します。

複数に変化を分割可能で、回転ですと 0% 100% でいいですが、複雑な変化を行う場合は、0% 20% 50% 100% のように変化の段階を指定できます。

animation

アニメーションする為の時間と、その時間をいくつに分割するかを指定します。また、名前を指定して、どのようなアニメーションをするかを決定します。ですから、@keyframes とはペアで記述する必要があります。

box-shadow

box-shadow を使って、回転している残像を一括で作成しています。丸く表示されているのは本体が border-radius: 50% で丸くなっているからで、本体は中心に描画されてその周りを複数の不透明度の違う円が並んでいます。それを回転する事によって、このようなアニメーションが実演されます。


<style type="text/css">
/*
  アニメーションの実体
  ※ フレームの最初と最後でどういう状態にするか
  ※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes ajax-loader-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* アイコン */
.ajax-loader-icon {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 20px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 5px;		/* サイズ変更 */
  height: 5px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}

/* テスト用の大きな DIV */
.ajax-loader {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 100px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 150px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 40px;		/* サイズ変更 */
  height: 40px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
  @keyframes と名前でリンク
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}
</style>

<div class="ajax-loader-icon"></div>
<div class="ajax-loader"></div>
box-shadow については、以下を参照

 CSS3 : box-shadow の影分身の解説

 jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する


IE10 の @keyframes

@keyframes rule (Internet Explorer)



タグ:CSS3
【CSS3の最新記事】
posted by lightbox at 2015-11-16 02:29 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり