CSSアニメーション例
右から颯爽と登場

※ネコブレイバーはマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

左から一直線に向かってくるシンプルなアニメーションですが、キャラクターに適用すると登場する感じになったので実用性がありそうです。

使っているプロパティはleftのみです。かなり単純な動きなので、少し行き過ぎて戻るように設定しました。

（これだけのアニメーションなら画像を使えばいいような・・）

HTMLコーディングの概要はこちらから。

CSS

.dots {
  float: left;
  width: 5%;
  padding-top: 5%;
  position: relative;
}


@keyframes coming {
  0% {
    left: 1500px;
  }
  70% {
    left: -30px;
  }
  90% {
    left: 0px;
  }
  100% {
    left: 0px;
  }
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, 
.c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20 {
  animation-name: coming;
  animation-duration: 2.8s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}