謹賀新年！css3 animationで雪が降りました！^O^

あけましておめでとうございます。

フリーランスになってちょうど1年経ちました。
2014年も、日々頑張っていきたいと思います！

かわたま.netも新年を迎えて少し可愛げをだしていきたいなと思い、
お勉強を兼ねてcss3のanimationで雪を降らせてみました^O^

1,雪の画像（動かしたい画像）を用意します

一枚雪の画像を用意します。今回はこのpng画像（背景は透過）を作成しました。
雪の結晶の素材はこちらからいただきました！
かわたま.netは背景の色薄めなので、雪の結晶に少し光彩を入れてみました。

２,htmlで雪を降らせたいdivを作成します

<div class="snow-area"></div>

３,cssを記述します

今回は背景全体に雪を降らせたかったので、width、height共に100％指定しました。
スクロールしてもリピートされるように、posipositionプロパティをfixedにするのがポイントです。
ベンダープレフィックスなし（標準）とありを併記します。

.snow-area{
  width: 100%;
  height: 100%;
  position: fixed;
  background-image:url(雪画像のパス);
}
  
/* 背景アニメーションを設定(今回はsnowanmとしました。) */

/*最初は右0,下0から、時間が100%(今回は30秒)に到達したら、background-positionを右に300px,下に500pxずれる*/
@keyframes snowanm {
  0%   {background-position:0 0;}
  100% {background-position:300px 500px;}
}

/*Firefox用*/
@-moz-keyframes snowanm {
  0%   {background-position:0 0;}
  100% {background-position:500px 500px;}　
}

/*chrome・safari用*/
@-webkit-keyframes snowanm {
  0%   {background-position:0 0;}
  100% {background-position:500px 500px;}　
}

/*Internet Explorer用*/
@-ms-keyframes snowanm {
  0%   {background-position:0 0;}
  100% {background-position:500px 500px;}　
}

/*Opera用*/
@-o-keyframes snowanm {
  0%   {background-position:0 0;}
  100% {background-position:500px 500px;}　
}


/*キーフレームsnowanm（@keyframes snowanm）を30s（30秒）かけて、
linear（一定の速度）で、infinite（無限に繰り返す)を指定（.snow-areaに追記）*/
.snow-area{
  animation: snowanm 30s linear infinite;
  -moz-animation: snowanm 30s linear infinite;
  -webkit-animation: snowanm 30s linear infinite;
  -ms-animation: snowanm 30s linear infinite;
  -o-animation: snowanm 30s linear infinite;
}

sample

できました！^O^
背景前面でなく部分的に雪を降らせる場合はpositionプロパティを調整します！

…

参考にしたサイト

http://www.greenwich.co.jp/blog-archives/p/2607

html5とcss3をもっと詳しく学びたい方にオススメ！

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
初心者の方でも見やすくわかりやすい内容でオススメです。