CSSでループアニメーションを作成・応用する方法！初心者向け徹底解説！

CSS

2024.01.242024.05.10

この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

はじめに
●1. ループアニメーションとは？
●2. CSSでループアニメーションを作成する方法
●3. ループアニメーションの応用方法
まとめ

はじめに

本記事では、CSSを用いてループアニメーションを作成し、使い方や応用方法を学んでいただくために、初心者目線で徹底解説していきます。

サンプルコードや応用例を交えながら、わかりやすく解説していきますので、どうぞお楽しみください。

●1. ループアニメーションとは？

ループアニメーションは、繰り返し再生されるアニメーションのことで、ウェブサイトのデザインに動きを加えるために用いられます。

CSSを使ってループアニメーションを作成することができます。

●2. CSSでループアニメーションを作成する方法

まずは、基本的なループアニメーションの作成方法を学びましょう。

次の手順で進めます。

@keyframesを使用してアニメーションを定義する
アニメーションを適用する要素にCSSプロパティを指定する

例として、次のようなループアニメーションを作成してみましょう。

要素が左から右へ移動し、画面の端に達すると再び左端から移動を始める

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS (styles.css)

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

●3. ループアニメーションの応用方法

次に、ループアニメーションを応用した例をいくつかご紹介します。

3-1.回転アニメーション要素がループしながら回転するアニメーションを作成してみましょう。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>

CSS (styles.css)

.circle {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3-2. 色変更アニメーション

要素の背景色がループしながら変化するアニメーションを作成してみましょう。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="color-changing-box"></div>
</body>
</html>

CSS (styles.css)

.color-changing-box {
  width: 50px;
  height: 50px;
  background-color: yellow;
  position: absolute;
  animation: change-color 3s linear infinite;
}

@keyframes change-color {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

3-3. フェードイン・アウトアニメーション

要素がループしながらフェードインとフェードアウトを繰り返すアニメーションを作成してみましょう。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fade-box"></div>
</body>
</html>

CSS (styles.css)

.fade-box {
  width: 50px;
  height: 50px;
  background-color: purple;
  position: absolute;
  animation: fade 3s linear infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

このように、ループアニメーションを応用することでさまざまな表現が可能です。

自由に組み合わせて、オリジナルなアニメーションを作成してみてください。