CSSだけでハロウィン気分の404ページ作った

前回アンパンマンをCSSでお絵描きしました。
CSSだけでお絵描き（CodePen）

今までCSSアニメーションをあまり使ったことがなく、使ってみたかったので
勉強がてら、CodePenで1つ作ってみました。
今回も記録用です。

ハロウィン気分の404

CSSで404ページを作りました。画像は使用してないです。
ページがないのはいたずらされたってことにすればいいじゃない...というコンセプトで
※スマホで見るとひどいのでオススメしないです( ；∀；)...

See the Pen CSS 404page Halloween by Deren (@deren2525) on CodePen.

CSSアニメーションを使用したところ

今回4つのモジュールにアニメーションを加えました。
全部シンプルです。

• コウモリ
• おばけ
• 館の窓
• 墓

以下、アニメーション部分のみ抜粋したものを書きます。

コウモリ

コウモリの動きです。上下移動をループしています。

style.scss

.bat {
  animation: bat 5s linear infinite alternate;
}

// コウモリの動き
@keyframes bat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

以下、コウモリの羽の動きです。少し回転をつけました。
右の羽と左の羽で分けています。

style.scss

.bat {
  &__right-wing { // 右の羽
  animation: bat 5s linear infinite alternate;
  }
  &__right-wing { // 左の羽
  animation: bat 5s linear infinite alternate;
  }  
}

// 右の羽
@keyframes bat-right-wing {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(-20deg);
  }
}

// 左の羽
@keyframes bat-left-wing {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(20deg);
  }
}

おばけ

右左を行ったり来たりしています。ある程度進んだら折り返します。
びみょーーに上にも上がっています。わずかですが

style.scss

//おばけの動き
.ghost {
  animation: ghost 20s linear infinite;
}

@keyframes ghost {
  0% {
    transform: translateX(0) rotateY(0);
  }
  45% {
    transform: translateX(190px) translateY(20px) rotateY(0);
  }
  50% {
    transform: translateX(200px) translateY(10px) rotateY(180deg);
  }
  95% { 
    transform: translateX(10px) translateY(10px) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(0);
  }
}

館の窓

館の窓の色が微妙に変わるようにしています。

style.scss

$BG_WINDOW: #F6E833;
$BG_WINDOW_MODIFY: #F0DB90;

// 窓の色
.house {
  &__window {
    animation: window 3s linear infinite;
  }
}

@keyframes window {
  0% {
    background-color: $BG_WINDOW;
  }

  100% {
    background-color: $BG_WINDOW_MODIFY;
  }
}

墓

ゆらゆら揺らしました。3つの墓がバラバラに揺れるようにそれぞれに時間を変えています。

style.scss

.grave {
  animation: grave 3s linear 3s infinite; // 大きい墓
  &--mini {
    animation: grave 2s linear 3s infinite; // 小さい墓
    &:nth-of-type(2) {
      animation: grave 3.5s linear 3s infinite; // 小さい墓2つ目
    }
  }
}

@keyframes grave {
  0% {
    transform: rotateZ(0);
  }
  
  25% {
    transform: rotateZ(10deg);
  }
  
  50% {
    transform: rotateZ(0);
  }
   
  100% {
    transform: rotateZ(0);
  }
}

所感

シンプルなアニメーションですが、シンプルでもなんか動いていると嬉しくなっちゃいますね。次は複雑なものにもチャレンジしたいです。

1日で作ったわりにはなかなかの出来で満足したのですが、ハロウィンはもうすぐ終わりますね。短い命。少し悲しい。
次はクリスマスでしょうか

追記(2018/11/01)

ハロウィンおわっちゃった！！！！