CSSでアニメーションを作成するには?コピペで使えるサンプルコードも紹介

2023.01.31
CSSでアニメーションを作成するには?

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

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

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

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

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

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

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

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

  • transitionプロパティ
  • animationプロパティ

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は、複数のプロパティをまとめて書いたものです。

  • transition-property:対象となるプロパティ
  • transition-duration:完了するまでの時間(ミリ秒)
  • transition-timing-function:変更速度
  • transition-delay:開始するまでの時間

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

.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プロパティは、以下のプロパティをまとめて記述したものです。

  • animation-name:アニメーションの名前
  • animation-duration:完了するまでの時間(ミリ秒)
  • animation-timing-function:変更速度
  • animation-delay:開始するまでの時間
  • animation-iteration-count:ループ回数
  • animation-direction:再生方向
  • animation-fill-mode:アニメーション前後の状態
  • animation-play-state:一時停止・再生の指定

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

.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アニメーションを勉強する上で、今回の記事が参考になれば幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5