CSS3にはTransition・Animationという2つの機能があり、これらを使用することで、CSSアニメーションを実装することが可能になります。今回はCSSだけで簡単にアニメーションを作成する方法を説明します。

クリエイター最終更新日: 20190924

CSSアニメーションの作り方

  • このエントリーをはてなブックマークに追加

CSS3にはTransition・Animationという2つの機能があり、これらを使用することで、CSSだけでアニメーションを実装することが可能になります。今回はCSSだけで簡単にアニメーションを作成する方法を説明します。

CSSアニメーションを実現する2つの機能

CSS Transition

CSS Transitionは開始・終了時のプロパティを定義し、その変化をスムーズに表示する機能です。

Transitionに関するプロパティには以下のようなものがあります。

プロパティ 説明
transition-property アニメーションさせるプロパティを指定します。
初期値はall で全てのプロパティがアニメーションの対象になります。複数のプロパティを指定する場合はカンマ区切りで記述します。
例)
transition-property: background-color, opacity;
transition-duration 変化の開始から終了までの時間を指定します。
単位は秒(s)またはミリ秒(ms)で、初期値は 0sとなります。
例)
transition-duration: 0.5s;
transition-timing-function 変化の仕方(イージング)を指定します。
プロパティの値は ease, linear, ease-in, ease-out, ease-in-outという固定値を指定する方法とcubic-bezier()という3次ベジェ曲線で指定する方法があります。
※イメージが伝わりやすいように動画を掲載します。
transition-delay アニメーション開始までの遅延を指定します。
単位は秒(s)またはミリ秒(ms)で、初期値は 0sとなります。
例)
transition-delay: 1.5s;
transition 上記の4つのプロパティを同時に指定します。
transition-propertyの指定が複数になる場合、カンマ区切りで順に指定します。
例)
transition: width 1.0s linear, background-color 2.0s ease-in;

CODEPENで確認する
CSS Animation Easing
by NEXMAG (@gnxmg)
on CodePen.

CSS Transitionではループなどの処理はできないですが、記述はシンプルで扱いやすいので、マウスオーバーのちょっとしたアニメーションなどに便利です。

下記はTransitionを使用した、マウスオーバーで幅と透明度が変化するサンプルとなります。

CSS

#sample01 span {
display: block;
width: 120px; /* 開始時の幅 */
height: 80px;
background-color: #ffcc00;
transition: 1.5s ease-in 0.5s;
}
#sample01 span:hover {
width: 300px; /* マウスオーバー時の幅 */
opacity: 0.6; /* マウスオーバー時の透明度 */
}

HTML

<section>
  <h1>Transitionのサンプル</h1>
  <div id="sample01">
      <span></span>
  </div>
</section>

CODEPENで確認する
CSS Animation 01
by NEXMAG (@gnxmg)
on CodePen.

CSS Animation

CSS Animation は 時間経過毎のプロパティの状態を指定できるアニメーション機能です。
時間毎の状態は@keyframesで定義し、animationで再生時間や再生回数などを指定していくことでアニメーションを実装することが出来ます。

@keyframesでCSSの@ルールに基づき記述します。

@keyframesの指定方法

/* 時間経過を%で指定する場合 */
@keyframes [任意の識別子] {
    0% {
        [プロパティ] : [ 値 ];
    },
    40% {
        [プロパティ] : [ 値 ];
    },
    100% {
        [プロパティ] : [ 値 ];
    }
}
/* 開始・終了をfrom, toで指定する場合 */
@keyframes [任意の識別子] {
    from {
        [プロパティ] : [ 値 ];
    },
    to {
        [プロパティ] : [ 値 ];
    }
}

animationに関するプロパティには以下のようなものがあります。

プロパティ 説明
animation-name @keyframesで定義した識別子(名前)を指定します。
animation-duration アニメーションにかかる時間を指定します。
単位は秒(s)またはミリ秒(ms)で、初期値は 0sとなります。
例)
animation-duration: 2.0s;
animation-timing-function 変化の仕方(イージング)を指定します。
※指定はtransition-timing-functionと同様になります。
animation-delay アニメーション開始までの遅延を指定します。
単位は秒(s)またはミリ秒(ms)で、初期値は 0sとなります。 例) animation-delay: 0.4s;
animation-iteration-count アニメーションの繰り返し回数を指定します。指定は数値か inifinite(無限)で初期値は1となります。
例)
animation-iteration-count: inifinite;
animation-direction アニメーションの再生方向を指定します。
指定はnormal, reverse, alternate, alternate-reverseの4種類となります。
※各指定内容は後述
animation-fill-mode アニメーション開始時・終了時の取り扱いを指定します。
指定はnone, forwards, backwards, bothの4種類となります。
※各指定内容は後述
animation 上記のプロパティを同時に指定します。

※animation-directionの値とその説明

説明
normal アニメーションを順方向に再生
reverse アニメーションを逆方向に再生
alternate アニメーションの繰り返し回数が奇数の場合は順方向、偶数の場合は逆方向に再生
alternate-reverse アニメーションの繰り返し回数が奇数の場合は逆方向、偶数の場合は順方向に再生

※animation-fill-modeの値とその説明

説明
none 再生中以外は キーフレームの指定は無効となります。
forwards 実行後最後のキーフレームの指定を保持します。
backwards 実行前に最初のキーフレームの指定が適用され、animation-delayの間保持します。
both forwardsとbackwardsが両方適用されます。

下記はAnimationを使用した、円が左右を行き来する単純なサンプルです。

CSS

@keyframes move02 {
  50% {
    background-color: #ffcc00;
  }
  100% {
    left: 300px;
    background-color: #ff6600;
  }
}
#sample02 {
  position: relative;
}
#sample02 span {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: #ff6600;
  position: absolute;
  left: 0;
  top: 0;
  animation: move02 2s linear infinite alternate;
}

HTML

<section>
    <h1>Animationのサンプル</h1>
    <div id="sample02">
        <span></span>
    </div>
</section>

CODEPENで確認する
CSS Animation 02
by NEXMAG (@gnxmg)
on CodePen.

見ていただいたようにCSS Animationなどのループ再生などの機能もあり、CSS Transitionと比べると複雑なアニメーションが可能になります。

表現を広げるCSSアニメーションのサンプル

ここからは実際の制作で使われるようなサンプルをご紹介いたします。

Transitionのサンプル(ナビゲーション)

CSS

#sample03 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 400px;
}
#sample03 li a {
  display: block;
  margin: 5px;
  padding: 10px;
  width: 5em;
  text-align: center;
  text-decoration: none;
  color: #333;
  background-color: #f3f3f3;
  position: relative;
}
#sample03 li a:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #222;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s ease-out;
  transform: scaleX(0);
}
#sample03 li a:hover {
  background-color: #efefef;
}
#sample03 li a:hover:after {
  transform: scaleX(1);
}

HTML

<section>
    <h1>ナビゲーションサンプル</h1>
    <ul id="sample03">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</section>

CODEPENで確認する
CSS Animation 03
by NEXMAG (@gnxmg)
on CodePen.

Animationのサンプル(ローディングアニメーション)

動画、画像などのローディングアニメーションをCSSのみで実装したサンプルになります。gifアニメが使われることも多いですが、CSSアニメーションの場合、微調整は簡単に行えます。

CSS

@keyframes loading {
  0% {
    transform: scale(0.3);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.3);
    opacity: 0.5;
  }
}
#sample04 {
  width: 150px;
  text-align: center;
}
#sample04 > div {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #ff9900;
  border-radius: 100%;
  animation: loading 1.2s infinite ease-in-out both;
}
#sample04 .dot1 {
  animation-delay: -0.4s;
}
#sample04 .dot2 {
  animation-delay: -0.2s;
}

HTML

<section>
    <h1>ローディングアニメーションサンプル</h1>
    <div id="sample04">
        <div class="dot1"></div>
        <div class="dot2"></div>
        <div class="dot3"></div>
    </div>
</section>

CODEPENで確認する
CSS Animation 04
by NEXMAG (@gnxmg)
on CodePen.

CSSアニメーションはうまく使うことでサイトの動的表現の幅が広がります。今回紹介した実装方法・サンプルを参考にしていただきながらCSSアニメーションに挑戦してみてください。また、CSSアニメーションはjavascriptを組み合わせることで更に複雑なことも可能になります。これについてはまた別の機会にご紹介できればと思います。

パソコン工房 NEXMAG[ネクスマグ]編集部アイコン画像
ライタープロフィール パソコン工房NEXMAG
[ネクスマグ] 編集部

パソコンでできるこんなことやあんなこと、便利な使い方など、様々なパソコン活用方法が「わかる!」「みつかる!」記事を書いています。

記事を
シェア