translate コマンドを利用した要素の移動アニメーション

概要

CSSのアニメーションで要素を移動する場合にはtranslate コマンドを利用します

書式

animationプロパティの書式は次の通りです。詳しくはこちらの記事を参照してください。

animation: (キーフレーム名) (アニメーション時間) (イージング);

animation: (キーフレーム名) (アニメーション時間) (イージングの種類) (アニメーション開始時間) (アニメーション回数) (アニメーションの方向)

メモ

イージングの種類についてはこちらの記事を参照してください。

translate コマンドはキーフレーム内で指定しますキーフレームの書式は次の通りです。

@keyframes (キーフレーム名) {
  0% {
    transform: translateX(移動距離) translateY(移動距離);
  }
  nn% {
    transform: translateX(移動距離) translateY(移動距離);
  }
  100% {
    transform: translateX(移動距離) translateY(移動距離);
  }
}

@keyframes (キーフレーム名) {
  0% {
    transform: translateX(移動距離);
  }
  nn% {
    transform: translateX(移動距離);
  }
  100% {
    transform: translateX(移動距離);
  }
}

@keyframes (キーフレーム名) {
  0% {
    transform: translateY(移動距離);
  }
  nn% {
    transform: translateY(移動距離);
  }
  100% {
    transform: translateY(移動距離);
  }
}

@keyframes (キーフレーム名) {
  0% {
    transform: translate(X移動距離,Y移動距離);
  }
  nn% {
    transform: translate(X移動距離,Y移動距離);
  }
  100% {
    transform: translate(X移動距離,Y移動距離);
  }
}

プログラム例

コード

下記のHTMLファイルとCSSファイルを作成します。

TranslateSimple01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TranslateSimple01.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

TranslateSimple01.css

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:760px;
  height:320px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:120px;
}

.charimg.charmove {
  animation: moveframe 2s linear;
}

@keyframes moveframe {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(640px);
  }
}

なお、SVG画像は下記の画像を用意しました。

char.css

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.11 240.11">
<defs>
<style>.cls-1{fill:#87d0f2;}.cls-2{fill:#231815;}.cls-3{fill:#fff;}.cls-4{fill:none;}.cls-4,.cls-5{stroke:#231815;stroke-miterlimit:10;stroke-width:2px;}.cls-5{fill:#ffed43;}</style>
</defs>
<circle class="cls-1" cx="120.54" cy="120.21" r="119.06"/><ellipse class="cls-2" cx="70" cy="91.76" rx="6.04" ry="9.43"/>
<ellipse class="cls-2" cx="170.12" cy="91.76" rx="6.04" ry="9.43"/><path class="cls-3" d="M93.5,154.68C73,154.68,36.13,194.2,44,206.74c6.46,10.27,37.74,55.77,100.76,55.61,61.29-.15,94.27-45.47,99.13-54.06,7.78-13.7-24.56-53.61-49.56-53.61Z" transform="translate(-24.23 -23.09)"/>
<circle class="cls-4" cx="120.06" cy="120.06" r="119.06"/>
<ellipse class="cls-5" cx="119.78" cy="129.63" rx="53.87" ry="20.83"/>
</svg>

解説

アニメーションの動作を @keyframes で定義します。 0%の時点はtransform: translateX(0px); を指定し、X方向の移動を0pxとします。 100%の時点でtransform: translateX(640px);を指定し、X方向に640ピクセル移動します。

@keyframes moveframe {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(640px);
  }
}

アニメーションの設定はサブクラスに記述します。CSSのサブクラスの詳細についてはこちらの記事を参照してください。

.charimg {
  width:120px;
}

.charimg.charmove {
  animation: moveframe 2s linear;
}

[Start]ボタンをクリックしたタイミングで、JavaScriptでサブクラスに charmoveクラスを追加します。 animation プロパティが設定されたサブクラスが追加されるタイミングでアニメーションの再生が開始されます。

    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
translate コマンドを利用した要素の移動アニメーション:画像1

[Start]ボタンをクリックします。キャラクターの画像が右側に動き始めます。

640ピクセル右に動き、アニメーションが終了すると、最初の位置にキャラクターの画像が戻ります。
translate コマンドを利用した要素の移動アニメーション:画像4

ページの要素を移動させるシンプルなアニメーションが実装できました。

プログラム例:縦方向への移動

縦方向に移動するアニメーションの例です。

コード

TranslateSimple02.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TranslateSimple02.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

TranslateSimple02.css

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:760px;
  height:320px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:120px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
  }

@keyframes moveframe {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(200px);
  }
}

解説

アニメーションの動作を @keyframes で定義します。 0%の時点はtransform: translateY(0px); を指定し、Y方向の移動を0pxとします。 100%の時点でtransform: translateY(200px);を指定し、Y方向に200ピクセル移動します。

@keyframes moveframe {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(200px);
  }
}

アニメーション開始やそのほかのCSS設定は先のコードと同様です。JavaScritpで要素にサブクラスを追加することでアニメーションを開始します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
translate コマンドを利用した要素の移動アニメーション:画像5

[Start]ボタンをクリックします。キャラクターの画像が下に動き始めます。

200ピクセル下に動き、アニメーションが終了すると、最初の位置にキャラクターの画像が戻ります。

translate コマンドを利用した要素の移動アニメーション:画像8

プログラム例:縦+横方向への移動

縦+横方向に移動するアニメーションの例です。

コード

TranslateSimple03.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TranslateSimple03.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

TranslateSimple03.css

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:760px;
  height:320px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:120px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
  }

@keyframes moveframe {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  100% {
    transform: translateX(640px) translateY(200px);
  }
}

解説

アニメーションの動作を @keyframes で定義します。 0%の時点はtransform: translateX(0px) translateY(0px); を指定し、X,Y方向の移動を0pxとします。 100%の時点でtransform: translateX(640px) translateY(200px);を指定し、X方向に640ピクセル、Y方向に200ピクセル移動します。

@keyframes moveframe {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  100% {
    transform: translateX(640px) translateY(200px);
  }
}

アニメーション開始やそのほかのCSS設定は先のコードと同様です。JavaScritpで要素にサブクラスを追加することでアニメーションを開始します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
translate コマンドを利用した要素の移動アニメーション:画像9

[Start]ボタンをクリックします。キャラクターの画像が右下に動き始めます。
translate コマンドを利用した要素の移動アニメーション:画像10

640ピクセル右に、200ピクセル下に動き、アニメーションが終了すると、最初の位置にキャラクターの画像が戻ります。

補足

translate コマンドを利用した次の書式も同じ動作になります。

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:760px;
  height:320px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:120px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
  }

@keyframes moveframe {
  0% {
    transform: translate(0px,0px);
  }

  100% {
    transform: translate(640px,200px);
  }
}

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。最近は生成AIの画像生成の沼に沈んでいる。

作成日: 2022-02-22

目次

translate コマンドを利用した要素の移動アニメーション

目次

概要

書式

プログラム例

コード

解説

実行結果

プログラム例:縦方向への移動

コード

解説

実行結果

プログラム例:縦+横方向への移動

コード

解説

実行結果

補足

関連するページ