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

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

CSS Transition

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

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

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-directionの値とその説明

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

下記は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
[ネクスマグ] 編集部