snowstorm.js という、雪を降らせるだけの スクリプトがあるのですが、少しカスタマイズして雪のキャラクタに ❄ を使って、一つ一つ廻すデモを作ってみました。 snowstorm の一つ一つを廻すデモ ▼ 以下本編 重要なのは、３つの部品に注目する事です。 @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の最新記事】
- CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS3 : box-shadow の影分身の解説
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- ブラウザ別の角丸とグラデーションの適用状態の比較画像
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript
