CSSアニメーションを利用した、「動き」のあるボタンなどを設置したサイトが増えてきました。

目を引くアニメーションを使うことで、サイトの利便性を高めたり、飽きずに読み続けてもらえたり、という効果がありますよね。

ただ、いざ作成しようと思っても、なかなかイメージ通りにはいかないものです。

今回は、「こういう動きを作りたい！」「イメージがわくようなサンプルが欲しい！」という方のために、CSSで作成できるアニメーションのサンプルコードを紹介します。

ぜひ最後まで読んでくださいね！

CSSアニメーションとは？設定方法を紹介

そもそも、CSSアニメーションはどのように作成するのでしょうか？

CSSだけでアニメーションを実装するには、以下の2つのプロパティを使う方法があります。

transitionプロパティは、開始と終了の2点間のアニメーションが作成できます。

animationプロパティは、時間を細かく分けた複雑なアニメーションが作成できます。

ループさせることが可能で、自動再生が可能です。

それぞれの特徴や使い方、実際のサンプルコードなどを紹介しましょう。

transitionプロパティについて

transitionプロパティを使うには、開始時と終了時の2点の状態を指定します。

「:hover」「:focus」などの疑似クラスを利用して、マウスホバーなどをきっかけにアニメーションが始まります。

具体例として、ボックスの色が変化するアニメーションを紹介します。

<div class="sample">サンプル</div>

CSSは以下のように記述します。

.sample{
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: 0.5s;
}
.sample:hover{
  background-color: red;
}

「:hover」に指定されたものが終了時の状態です。

表示されたボックスにマウスカーソルを乗せると、0.5秒かけて青から赤に切り替わります。

transitionは、複数のプロパティをまとめて書いたものです。

これらをまとめて以下のように記述します。

.sample{
  transition: color 0.7s ease-in 1s;
}

transitionを使ったサンプル

それでは、transitionを使ったアニメーションのサンプルを3つ紹介しましょう。

リンク下線を表示

リンクにマウスをホバーさせたときに、下線が左から伸びるアニメーションを作成します。

<a href="#">リンクに下線を表示</a>

CSSは以下のように書きます。

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #ff7f50;
}
a:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 0%;
  height: 2px;
  background: #ff7f50;
  transition: .3s;
}
a:hover:after {
  width: 100%;
}

疑似要素の「:after」を使って、下線を作っています。

初めは幅を0%にしておき、ホバーしたときに100%になるように指定しています。

ボタンのスライド

マウスでホバーしたときに、スライドして色が変わるボタンを作成します。

<a href="#">ボタンのスライド</a>

CSSは以下のように書きます。

a {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  margin: 0;
  border: 2px solid #333;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}
a:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 0%;
  content: '';
  background: #333;
  transition: .3s;
}
a:hover {
  color: #fff;
}
a:hover:before {
  width: 100%;
}

疑似要素「:before」で変化後の色のボックスを作成しました。

アニメーションが始まると、幅が拡大して要素を覆います

「z-index: -1」を入れておかないと、文字が下に隠れてしまうので忘れないようにしましょう。

ラジオボタンが中心から拡大

ラジオボタンをクリックすると、チェック部分が中心から広がるアニメーションを作成します。

<div>
<input type="radio" id="radio1" name="radio" checked>
  <label for="radio1">ラジオボタン1</label>
</div>
<div>
  <input type="radio" id="radio2" name="radio">
  <label for="radio2">ラジオボタン2</label>
</div>
<div>
  <input type="radio" id="radio3" name="radio">
  <label for="radio3">ラジオボタン3</label>
</div>

CSSは以下のように書きます。

input {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
label {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  cursor: pointer;
}
label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 2px #ccc;
  transition: 0.15s;
}
input:checked + label:before{
  border-color: #4ee692;
}
label:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: #4ee692;
  border-radius: 50%;
  color: transparent;
  transform: scale(0);
  transition: transform 0.15s,color 0.15s;
}
input:checked + label:after {
  transform: scale(1);
}

input要素を非表示にして、label要素の疑似要素でチェック部分を作っています。

ラジオボタンにチェックが入ると、内側の円が中心から拡大します。

animationプロパティについて

animationプロパティは、キーフレームを使ってアニメーションを作成します。

開始時と終了時を含み、複数の場所でそのときの状態を指定できます。

キーフレームは、0~100%で記述します。

下記のコードでは、3秒かけてボックスの色が「青→緑→黄色」と変化します。

<div class="animation-sample">キーフレームの指定</div>

CSSは以下のように書きます。

.animation-sample {
  width: 200px;
  height: 50px;
  animation: my_anime 3s;
}
@keyframes my_anime {
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

animationプロパティは、以下のプロパティをまとめて記述したものです。

以下のようにまとめて書くことができます。

.sample{
  animation: my_anime 0.5s linear 1s infinite reverse forwards running;
}

animationを使ったサンプル

animationを使ったアニメーションのサンプルを全部で3つ紹介していきますね。

収縮するボタン

ボタンを目立たせるため、要素の伸び縮みをさせる動きを作成します。

<div class="anime-button">CLICK</div>

CSSは以下のように書きます。

.anime-button {
  display: inline-block;
  font-size: 20px;
  text-align: center;
  background: blue;
  padding: 7px 25px;
  border-radius: 10px;
  color: #fff;
  animation: anime 2s ease-out infinite;
}
@keyframes anime {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

ボタンは自由に作成することができます。時間をキーフレームで区切って縮小と拡大を繰り返します。

scale()を使って大きさを変化させています。

ローディングアイコン

待機画面にあるようなローディングを作成します。

<div class="loading">
<div class="icon"></div>
</div>

CSSは以下のように書きます。

.loading{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.icon {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  box-shadow:
    0 -30px 0 #eee,
    21px -21px 0 #ddd,
    30px 0 0 #ddd,
    21px 21px 0 #aaa,
    0 30px 0 #aaa,
    -21px 21px 0 #666,
    -30px 0 0 #666,
    -21px -21px 0 #000;
  animation: rotate 1s steps(8) 0s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

box-shadowで、8つの色違いの円を作成しています。

8ステップで360度回転させることで、円の位置を動かさないまま、ぐるぐる回っている様子を演出できます。

文字をバウンドさせながら表示

文字がバウンドしながら現れるアニメーションを作成します。

<div class="textbound">
  <p class="bound1">P</p>
  <p class="bound2">O</p>
  <p class="bound3">I</p>
  <p class="bound4">N</p>
  <p class="bound5">T</p>
</div>

CSSは以下のように書きます。

.textbound {
  font-size: 40px;
  text-align: center;
}
p{
  display: inline-block;
}
.bound1{animation: bound .6s ease-in-out;}
.bound2{animation: bound .7s ease-in-out;}
.bound3{animation: bound .9s ease-in-out;}
.bound4{animation: bound 1.0s ease-in-out;}
.bound5{animation: bound 1.1s ease-in-out;}

@keyframes bound {
  0% {transform: translate(0,-400px);}
  50% {transform: translate(0,100px);}
  70% {transform: translate(0,-100px);}
  90% {transform: translate(0,30px);}
  100% {transform: translate(0,0);}
}

1文字ごとにアニメーションの再生時間を変えています。

ポップな演出をしたいときなどにおすすめですね。

まとめ：オリジナルのCSSアニメーションに挑戦しよう

今回は、CSSのtransitionとanimationの使ったアニメーションの作り方と、それぞれのサンプルコードを紹介しました。

transitionとanimationを使用したアニメーションはコードが複雑になりがちですが、今回は理解しやすさを優先して、なるべく短いコードで済むものを解説しています。

物足りない場合は、色々と書き足して試してみてください。

より複雑なアニメーションを作成するために、JavaScriptなどのプログラムを利用してみても良いかもしれませんね。

CSSアニメーションを勉強する上で、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／