CSS3のkeyframesではじめしゃちょーを走らせてみました

こんにちは！エンジニア（仮）のめる（@c5meru）です。
こちらの記事は、UUUM Advent Calendar 2018 19日目の記事です！

5日目の前回は、CSSでHIKAKINをかきました。
HIKAKINときたので、今回もUUUMのクリエイターである、はじめしゃちょーを題材にしたいと思います！

参考にさせていただいたのは、はじめさんのYouTubeチャンネル「はじめしゃちょー（hajime）」のエンディングアニメーションです。こんなかんじのやつです。

f:id:c5meg1012:20181217135519p:plain — エンディングアニメーション。ドット絵のはじめしゃちょーが走っています。

で、実際に作ったものがこちら。

イラスト部分は画像になっていて、

画像をパラパラ入れ替える keyframes （ dash ）
左から右にキャラクターを動かす keyframes （ move ）

の2つを組み合わせています。chromeのみ動作確認済みです。

以下、コードの内容です。

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめしゃちょー</title>
  <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
  <div class="container">
    <div class="hajime">
      <div class="frame frame--001">
        <img src="images/001.jpg">
      </div>
      <div class="frame frame--002">
        <img src="images/002.jpg">
      </div>
      <div class="frame frame--003">
        <img src="images/003.jpg">
      </div>
      <div class="frame frame--004">
        <img src="images/004.jpg">
      </div>
      <div class="frame frame--005">
        <img src="images/005.jpg">
      </div>
      <div class="frame frame--006">
        <img src="images/006.jpg">
      </div>
      <div class="frame frame--007">
        <img src="images/005.jpg">
      </div>
      <div class="frame frame--008">
        <img src="images/004.jpg">
      </div>
      <div class="frame frame--009">
        <img src="images/002.jpg">
      </div>
      <div class="frame frame--010">
        <img src="images/003.jpg">
      </div>
      <div class="frame frame--011">
        <img src="images/001.jpg">
      </div>
    </div>
  </div>
</body>
</html>

CSS

body {
  background-color: #000; 
}

.frame {
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  position: absolute;
  animation: dash 0.4s linear infinite 0s forwards;
  animation-play-state: running; 
}

.frame img {
  width: 100%; 
}

.frame--001 {
  z-index: 11;   
}

.frame--002 {
  animation-delay: 0.1s;
  z-index: 10; 
}

.frame--003 {
  animation-delay: 0.125s;
  z-index: 9; 
}

.frame--004 {
  animation-delay: 0.15s;
  z-index: 8; 
}

.frame--005 {
  animation-delay: 0.175s;
  z-index: 7; 
}

.frame--006 {
  animation-delay: 0.2s;
  z-index: 6; 
}

.frame--007 {
  animation-delay: 0.3s;
  z-index: 5; 
}

.frame--008 {
  animation-delay: 0.325s;
  z-index: 4; 
}

.frame--009 {
  animation-delay: 0.35s;
  z-index: 3; 
}

.frame--010 {
  animation-delay: 0.375s;
  z-index: 2; 
}

.frame--011 {
  animation-delay: 0.4s;
  z-index: 1; 
}

@keyframes dash {
  0% {
    visibility: visible;
    z-index: 100; 
  }

  12.5% {
    visibility: visible;
    z-index: 100; 
  }

  25% {
    visibility: hidden;
    z-index: 0; 
  }

  100% {
    visibility: hidden;
    z-index: 0; 
  } 
}

.hajime {
  top: 0px;
  left: -250px;
  width: 250px;
  height: 250px;
  position: absolute;
  animation: move 15s linear 0s infinite normal;
}

@keyframes move {
  0% {
    left: -250px; 
  }
  100% {
    left: 100%; 
  } 
}