CSSアニメーション例
上下左右に動く

ここでは、CSSアニメーションを使って、divタグでつくったボックスを動かしてみます。

アニメーションを適用する要素の基本プロパティ/値

前提として、CSSアニメーションを適用するクラスには、それぞれ次のプロパティ/値を設定しておきます。ラベンダー色の200x200のボックスです。アニメーションの開始状態によって少し値をいじりますが、都度解説します。

また、要素を動かすため（topプロパティやleftプロパティで操作するため）、positionプロパティをrelativeにしています（leftとtopの初期値として0を設定）。

CSS

クラス名 {
  width: 200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0;
  top: 0;
}

DEMO

右に移動する

右に移動する場合は、leftプロパティの値を大きくします。leftプロパティは、要素が左の起点からどれだけ離れるかを制御します。

CSS

@keyframes moveToRight {
  100% {
    left: 200px;
  }
}

.moveToRight {
  width: 200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0;
  top: 0;

  animation-name: moveToRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

左に移動する

左に移動する場合は、leftプロパティの値を小さくします。

ただ、左によった要素がさらに左にいったら都合が悪いので、ここでは元の位置を右寄りにしておきます。

コード上は、leftの値を200pxから0に小さくしています（leftはマイナスの値も取れます）。

CSS

@keyframes moveToLeft {
  100% {
    left: 0px;
  }
}

.moveToLeft {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 200px;
  top: 0;

  animation-name: moveToLeft;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

左右に往復する

左への移動と右への移動を組み合わせて、左右往復します。

CSS

@keyframes return {
  50% {
    left: 200px;
  }
  100% {
    left: 0px;
  }
}

.return {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 0;

  animation-name: return;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

下に移動する

上下の移動も、左右の移動と基本的には同じ考え方です。扱うプロパティがleftかtopかの違いだけです。

下に移動する場合は、topの値を大きくします。

CSS

@keyframes goDown {
  100% {
    top: 200px;
  }
}

.goDown {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 0;

  animation-name: goDown;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

上に移動する

下に移動する場合は、topの値を小さくします。ここでは、topの元の値は-200pxにしておき、アニメーション進行100%時点で0になるように設定してみます。

CSS

@keyframes goUp {
  100% {
    top: 0px;
  }
}

.goUp {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 200px;

  animation-name: goUp;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

上下に移動する

下の移動と上の移動を組み合わせて、上下の移動にしてみます。

CSS

@keyframes goDownAndUp {
  50% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

.goDownAndUp {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 0px;

  animation-name: goDownAndUp;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

斜めに移動する

左右の移動と上下の移動を組み合わせると、斜めの移動を実現できます。

右下に移動する場合はleftとtopをそれぞれ大きくします。

CSS

@keyframes rightDown {
  100% {
    left: 200px;
    top: 200px;
  }
}

.rightDown {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 0px;

  animation-name: rightDown;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

左上に移動する場合はleftとtopをそれぞれ小さくします。

CSS

@keyframes leftUp {
  100% {
    left: 0px;
    top: 0px;
  }
}

.leftUp {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 200px;
  top: 200px;

  animation-name: leftUp;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO

応用編

左右上下の移動を組み合わせると、自在に要素を移動することができます。以下、応用したものです。

CSS

@keyframes mix {
  25% {
    left: 200px;
    top: 200px;
  }
  50% {
    left: 200px;
    top: 0px;
  }
  75% {
    left: 0px;
    top: 200px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}

.mix {
  width:  200px;
  height: 200px;
  background-color: Lavender;
  position: relative;
  left: 0px;
  top: 0px;

  animation-name: mix;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

DEMO