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

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

もっと見る：CSSアニメーション 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

CSSアニメーション 一覧

上下左右に動く @keyframesとanimationプロパティの使い方 画像などを動かす 基本的なアニメーション（フェードイン/アウト、拡大縮小） アニメーション進行度合いの設定 animation-timing-function 20x20のボックスアニメーション CSSアニメーション
  • CSSアニメーションの基本設定
  • アニメーション進行度合いの設定
  • フェードイン/アウト、拡大縮小
  • 上下左右に動くアニメーション
  • 20x20ボックスアニメーション
  • 画像を使ったアニメーション
カテゴリー 言語
  • 英語
  • 中国語
  • 翻訳
  • 日本語/教養
ウェブデザイン
  • HTML&CSSコーディング
  • CSSアニメーション
  • Jimdoカスタマイズ
  • 配色サンプル（3色）
ライフスタイル
  • フリーランス
  • マネタイズ/AdSense
  • クリエイターインタビュー
  • 奨学金
  • マネー
  • ヘルスケア
その他
  • クイズ
  • ハウツー・コツ
  • お出かけ
  • ギター・映画
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

Niugnepについて

Niugnepは翻訳会社のオフィスペンギンが運営する、わかりやすい解説をモットーにした教養メディアです。Niugnepというサイト名は、Penguinが逆立ちしていることに由来します。

ご連絡：フォームまたはTwitter

📎📎📎📎📎📎📎📎📎📎
BOT