ZeroPlus Media > Web制作 > 【CSS】keyframesで線が動くアニメーションの作り方

【CSS】keyframesで線が動くアニメーションの作り方

Web制作

2022/05/24

2022/08/09

Webサイトで使われるアニメーションの中には、JavaScriptを使わずにCSSのみで実装できる簡単なものが含まれていることがあります。CSSのみで実行できると、動作が軽くなるのでおすすめです。

この記事ではHTML、CSSを用いて「keyframesを使った線が動くアニメーション」の作り方を解説します。

この記事で身につく内容

keyframesを使った線が動くアニメーションの作り方
keyframes,transform-originの使い方

サンプルのダウンロード
アニメーション作成のポイント
keyframseで線が動くアニメーションを実装してみよう！
- keyframseの設定
- animationプロパティでkeyframesを呼び出す
まとめ

サンプルのダウンロード

下記のリンクからサンプルをダウンロードしてください。

サンプルコード

ファイルを開くと、下記2つのファイルが入っています。

「code」→HTML・CSSが入っているファイル

下記からサンプルコードを確認することもできます。

See the Pen line-animate-infinite by ZeroPlus (@zeroplus-programming) on CodePen.

アニメーション作成のポイント

この記事で紹介するアニメーション実装のポイントは3点あります。

線が動くアニメーションの実装ポイント

疑似クラスの:nth-child()を使う
keyframesを使う
animationを使う

それぞれのポイントについては、各セクションで解説していきます。

なお、疑似クラス、keyframes、animationについては下記の記事で詳しく解説しています。

CSSのnth-childとnth-of-typeの使い方と違いを解説

【CSS】animationと@keyframesの指定方法を完全解説

keyframseで線が動くアニメーションを実装してみよう！

ここからkeyframesを使った線が動くアニメーションの実装をしていきます。

ベースのHTMLは次のようになります。

<div class="box">
  <span class="box__line"></span>
  <span class="box__line"></span>
  <span class="box__line"></span>
  <span class="box__line"></span>
 </div>

ベースのCSSは次のようになります。

.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  display: block;
}

.box__line {
  position: absolute;
}

.box__line:nth-child(1),
.box__line:nth-child(3) {
  width: 100%;
  height: 2px;
}

.box__line:nth-child(2),
.box__line:nth-child(4) {
  width: 2px;
  height: 100%;
}

.box__line:nth-child(1) {
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, orange);
}

.box__line:nth-child(2) {
  top: 0;
  right: 0;
  background: linear-gradient(to bottom, transparent, orange);
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  background: linear-gradient(to left, transparent, orange);
}

.box__line:nth-child(4) {
  top: 0;
  left: 0;
  background: linear-gradient(to top, transparent, orange);
}

出力結果出

See the Pen line-animate-infinite-base by ZeroPlus (@zeroplus-programming) on CodePen.

線の配置は、position:absolute;です。線はspanタグのwidthとheight、background:liner-gradientd ;で表現します。疑似クラスnth-childで上下左右の線をそれぞれ指定しています。

上の線：box__line:nth-child(1)
下の線：box__line:nth-child(3)
左の線：box__line:nth-child(2)
右の線：box__line:nth-child(4)

linear-gradientはグラデーションをかけるプロパティで、その値は（to 方向、開始色、終了色）という内容です。

それぞれの線に指定したlinear-gradientは次のような意味になります。

上の線：linear-gradient(to 右方向へ, 開始色は透明（transparent), 終了色はオレンジ)
下の線：linear-gradient(to 左方向へ, 開始色は透明（transparent), 終了色はオレンジ)
左の線：linear-gradient(to 下方向へ, 開始色は透明（transparent), 終了色はオレンジ)
右の線：linear-gradient(to 上方向へ, 開始色は透明（transparent), 終了色はオレンジ)

keyframseの設定

線の動きを次のようにkeyframesで設定します。

@keyframes animate1 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes animate2 {
  0% {
    transform: translateY(-100%);
  }

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

@keyframes animate3 {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes animate4 {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

keyframesは、アニメーションを再生する始点を0%、終点を100%としています。上下左右の線、それぞれに対して個別にアニメーションを設定したいので、4つのkeyframesを設定しています。

animationプロパティでkeyframesを呼び出す

animationプロパティでkeyframesの設定を呼び出します。上下左右それぞれに対して、animationプロパティでkeyframesを呼び出します。

.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  display: block;
  overflow: hidden;
  /**追記**/
}

.box__line:nth-child(1) {
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, orange);
  animation: animate1 2s linear infinite;
  /**追記**/
}

.box__line:nth-child(2) {
  top: 0;
  right: 0;
  animation: animate2 2s linear infinite;
  /**追記**/
  background: linear-gradient(to bottom, transparent, orange);
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  background: linear-gradient(to left, transparent, orange);
  animation: animate3 2s linear infinite;
  /**追記**/
}

.box__line:nth-child(4) {
  top: 0;
  left: 0;
  background: linear-gradient(to top, transparent, orange);
  animation: animate4 2s linear infinite;
  /**追記**/
}

出力結果

See the Pen line-animate-infinite-keyframes by ZeroPlus (@zeroplus-programming) on CodePen.

animationプロパティは、ショートハンドで記述できます。ショートハンドとは、プロパティの記述を短く、省略して記述する手法です。

infiniteで無限に線が動くようになります。線を.boxクラスの外側では非表示にしたいので、overflow:hidden;を記述します。仕上げにtransitionプロパティでアニメーションの遅延設定を行います。

.box__line:nth-child(1) {
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, orange);
  animation: animate1 2s linear infinite;
}

.box__line:nth-child(2) {
  top: 0;
  right: 0;
  animation: animate2 2s linear infinite;
  animation-delay: 1s;/**追記**/
  background: linear-gradient(to bottom, transparent, orange);
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  background: linear-gradient(to left, transparent, orange);
  animation: animate3 2s linear infinite;
}

.box__line:nth-child(4) {
  top: 0;
  left: 0;
  background: linear-gradient(to top, transparent, orange);
  animation: animate4 2s linear infinite;
  animation-delay: 1s;/**追記**/
}

出力結果

See the Pen line-animate-infinite by ZeroPlus (@zeroplus-programming) on CodePen.

これで完成となります。