要素を動かし続ける簡単なCSSアニメーション

こんにちは、コンスキです。

要素を動かし続けたいときに使える簡単なコード集をご紹介します。

要素を動かし続ける

要素を動かし続ける

まず、アニメーションをつける「block」というクラス名のついた要素をHTMLで用意しています。

クラス名はお好きなもので大丈夫です。

【HTML】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>game</title>
</head>
<body>
  <div class="block"></div>
</body>
</html>

たて移動

【CSS】

.block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 2s infinite linear;
  left: calc(50% - 50px); /*自由に変えてください*/
}
@keyframes move {
  0% {
    top: 200px;　/*アニメーションの開始地点*/
  }
  50% {
    top: calc(100% - 300px);  /*アニメーションの折り返し地点*/
  }
  100% {
    top: 200px;  /*アニメーションの開始地点*/
  }
}

ところどころ「calc( )」を使って書いていますが、普通に「px」で書いても大丈夫です。

たて移動にするために重要なのは、0%と 50%と100%の全てで左右（水平方向）の座標を変えないことです。

よこ移動

.block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 2s infinite linear;
  top: calc(50% - 50px); /*自由に変えてください*/
}
@keyframes move {
  0% {
    left:200px;
  }
  50% {
    left: calc(100% - 300px);
  }
  100% {
    left: 200px;
  }
}

よこ移動にするために重要なのは、0%と 50%と100%の全てで上下（垂直方向）の座標を変えないことです。

ななめ移動

.block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 2s infinite linear;
}
@keyframes move {
  0% {
    top: 200px;
    left:200px;
  }
  50% {
    top: calc(100% - 300px);
    left: calc(100% - 300px);
  }
  100% {
    top: 200px;
    left: 200px;
  }
}

ななめ移動にするために重要なのは、0%と 50%と100%の全てで左右（水平方向）の座標を変えることです。