keyframesを使ってブログに雪を降らせる

CSS

f:id:ktrw3200:20180108171342j:plain

ブログに季節感を

どんどんと寒くなってきて、ところによっては雪も降っているようですね。大阪では、まぁ雪は降りません。と、こんな話をする季節になってまいりました。冬ですね。

そこで、「ブログにも季節感を出そう」というわけで、今回はメインブログの方でCSSの@keyframesを利用して雪を降らせました。もちろん、jQueryなどは一切使っておりません。CSSのみです。

keyframesとanimation

CSSで、ある要素に動きをつけるためには、transitionもしくはanimationを使う2つの方法があります。

今回使用するanimationはどのように動くかを指定でき、ペアとして使う@keyframeではどのような動きをするかを指定することができます。

記述方法

keyframesは前に@をつけます。

@keyframes [動きの名前]{
  0% {
    [プロパティ]: [値]
  }
  100% {
    [プロパティ]: [値]
  }
}

0%は動きの始まりを意味し、100%は動きの終わりを意味します。

また、50%など、始まりと終わり以外にも指定することで、反復運動などの複雑な動きも実装することができます。

次にanimationの記述方法です。

要素 {
  animation: [アニメーションに関するプロパティ]
}

簡単に説明してしまいましたが、アニメーションのプロパティは８つあります。詳しくは以下の記事を

【CSS3】@keyframes と animation 関連のまとめ - Qiita

ちなみに、animationや@keyframesはCSS3から新しく追加されたプロパティであるため、一部ブラウザではベンダプレフィックスを付ける必要があります。

雪を降らせる

See the Pen SnowEffect by Puchutech (@puchutech) on CodePen.

最初にリストで10個の項目（以下、雪）を用意しておきます。雪の色を透過することにより、重なったときにいい感じになります。

雪にそれぞれ、アニメーションの長さanimation-durationとアニメーションの遅延animation-delayを設定し、10個の雪が全てバラバラに降ってくるようにしました。また、それぞれの雪の大きさもバラバラにしています。

keyframesはこんな感じ。

@keyframes "snow" {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(500px);
    }
}

最初、雪は0の位置に配置され、0から100%になるまでにY軸方向(縦)に500px下がっていきます。 このとき、animationでは

.effect_snow{
  animation: snow 30s linear infinite;
}

と記述しており、一定の変化量にするためイージングのプロパティをlinear、アニメーションをループさせるためにinfiniteを指定しています。

@keyframes中に使っているtransformも一部ブラウザで対応していないため、ベンダプレフィックス（-webkit-など）を付けています。

各ブラウザの対応状況

「animation」「@keyframe」

  • 10.0
  • 43.0
  • 16.0
  • 30.0
  • 9.0

接頭語（ベンダープレフィックス）-webkit-をつけることでChrome4.0～,Safari4.0～,Opera15.0～に対応させることが出来ます。 また、-moz-をつけることでFirefox5.0～、-o-をつけることでOpera12.0～に対応させることができます。

「transform」

  • 10.0
  • 36.0
  • 16.0
  • 30.0
  • 9.0

接頭語（ベンダープレフィックス）-webkit-をつけることでChrome4.0～,Safari4.0～,Opera15.0～に対応させることが出来ます。 また、-moz-をつけることでFirefox5.0～、-o-をつけることでOpera12.0～に対応させることができます。

あとがき

こんな風にCSSのみで要素をかなり自由に動かせると、webデザインの幅も広がりますね。