CSS3で動きをつける（トランジションとアニメーション）
2018/11/07 2021/07/14

HTML5を基礎から勉強しはじめて驚いたのが、HTMLとCSSだけでアニメーションのような動きのあるコンテンツが作成できるということです。
それまでは、動きのあるサイト＝JavaScriptを使用する、と考えていたので、
（というかJavaScript自体苦手なので漠然とそう思っていた、という方が正しいですが、、）
学習するにつれ、いろいろ試してみたい衝動に駆られています！

ただ、今はじっくりコードを書いて勉強する時間がなく、ざっとどんなことができるかを把握したいので、自分が学習していてポイントと感じた点をまとめておきたいと思います！

transformプロパティ

transformプロパティの基礎

transformプロパティは、要素のボックスを回転・拡大縮小・移動・変形させるプロパティ。
値は関数形式になっており、空白文字で区切って必要なだけ指定可能です。
以下に一覧を記載します。

transformプロパティに指定できる値
値	単位	値の示す意味
none		回転・拡大縮小・移動などを一切していない状態。
rotate（角度）	deg,rad	時計回りに回転する角度を数値で指定
scale（X方向,Y方向）	倍率を単位なしで指定	X方向,Y方向に拡大縮小する倍率を数値で指定。
scaleX（X方向）	倍率を単位なしで指定	X方向に拡大縮小する倍率を数値で指定。
scaleY（Y方向）	倍率を単位なしで指定	Y方向に拡大縮小する倍率を数値で指定。
translate（X方向,Y方向）	px	X方向,Y方向に移動する距離を数値で指定。
translateX（X方向）	px	X方向に移動する距離を数値で指定。
trancelateY（Y方向）	px	Y方向に移動する距離を数値で指定。
skew（X方向,Y方向）	deg,rad	X軸、Y軸に沿って傾斜する角度を数値で指定。
skewX（X方向）	deg,rad	X軸に沿って傾斜する角度を数値で指定。
skewY（Y方向）	deg,rad	Y軸に沿って傾斜する角度を数値で指定。
matrix	px,deg,rad	6つの値からなる行列にヨリ二次元の変形を行う。

以下、サンプルコードです。
div要素をX軸方向、Y軸方向に50px移動（taranslate）、X軸方向、Y軸方向に1.5倍、時計回りに45度回転、です。

[サンプルコード]
<div>
これはテストです
</div>
<style>
width: 120px;
height: 30px;
color: #fff;
background: #999;
transform: translate(100px, 50px) scale(1.5, 1.5) rotate(45deg);
</style>

[表示]

これはテストです

tranceformプロパティの三次元関数

transformプロパティでは三次元関数を使用することができます。代表的な三次元関数は以下の通りです。

rotate3d()
rotateZ()
scale3d()
scaleZ()
trancelate3d
trancelateZ()
matrix3d()

trasform-originプロパティ

transformプロパティで回転・拡大縮小・移動・変形を行う際のの原点を設定するためのプロパティ。
初期値は50% 50%で、ボックスの中心が原点となっています。

CSS3のトランジション

たとえば、セレクタの:hoverを使った場合、マウスオーバーした瞬間に表示が瞬時に切り替わります。
CSS3のトランジションは、瞬時に切り替わるのではなく、連続した動きで滑らかに変化させる機能。

transition-propertyプロパティ

transition-propertyプロパティは、「どのプロパティ」の値が変更された時にどのトランジションを実行させるのかを設定するプロパティ。

transform-prppertyプロパティに指定できる値
値	値の示す意味
プロパティ名	値が変更された時にトランジションを適用するプロパティ名を指定。カンマで区切って複数指定可能。
all	トランジションの適用が可能な全てのプロパティに適用。
none	どのﾌプロパティにもトランジションを適用しない。

[使用例]

#sample {
    transition-property: transform, opacity;
    transition-duration: 2s;
}

transition-durationプロパティ

トランジションを実行する際にどれだけの時間をかけて変化させるのかを設定。初期値は0s。単位は”s”（秒）、もしくは”ms”（ミリ秒）。

transition-timing-functionプロパティ

様々なパターンで速度に変化をつけられるプロパティ。
たとえば、トランジション機能で表示を変化させる際、最初から最後まで一定のスピードになっていると、変化の種類によっては機械的で不自然な印象になってしまいます。そこで、ゆっくりと変化を開始して徐々にスピードを上げ、だんだんとスピードを落としながら終了する、といった表現が可能になります。

transition-timing-functionプロパティに指定できる値（主要な物を抜粋）
値	値の示す意味
ease	加速をつけて、ゆっくりと始まり、ゆっくりと終わる。
ease-in	ゆっくりと始まり、一定速度で終わる。
ease-out	一定速度で始まり、ゆっくりと終わる。
ease-in-out	ゆっくりと始まり、ゆっくりと終わる。
liinear	最初から最後まで一定の速度で変化する。

transition-delayプロパティ

transition-delayプロパティは、トランジションの開始を遅らせるプロパティ。値には、時間をあらわす数値に単位をつけて指定します。初期値は0s。

transitionプロパティ

トランジション関連のプロパティの値をまとめて指定できるプロパティ。
空白文字で区切って順不同で指定可能。
時間を表す値については、1つ目に指定されているものがtransition-durationプロパティの値で、２つ目に指定されているものがtransition-delayプロパティの値だと認識されます。

CSS3のアニメーション

CSS3のアニメーションは、トランジションを連続して実行させるようなものです。
トランジションは二点間の変化しか表現できませんが、連続して次々と別の状態に変化させられるようにしたのがCSS3のアニメーションです。
その実現のために、どの段階でどの値がどう変化するのかを記したキーフレームという特別な書式を用います。
それを除けばトランジションとほぼ同様の機能を持ったプロパティも多くあり、それらの名称や指定方法は多くの部分で共通しています。

@keyframes

以下にCSS3におけるキーフレームの記述方法です。

@keyframes 名前 {
    0% {
        プロパティ: 値;
        プロパティ: 値;
        ・・・
    }

    ◯% {
        プロパティ: 値;
        プロパティ: 値;
        ・・・
    }

    ◯% {
        プロパティ: 値;
        プロパティ: 値;
        ・・・
    }

また、キーフレームの「0%」は「from」、「100%」は「to」と書くこともできます。

animation-nameプロパティ

キーフレームを名前で指定して実行させるためのプロパティ。

animation-nameプロパティに指定できる値
値	値の示す意味
キーフレームの名前	アニメーションを実行させるキーフレームの名前を指定する。カンマで区切って複数指定可能。
none	アニメーションを実行しない。

animation-durationプロパティ

アニメーションの再生時間を設定するプロパティ。初期値は0s。

animation-timing-functionプロパティ

アニメーションの再生速度の変化パターンを設定するプロパティ。

animation-timing-functionプロパティに指定できる値（主要なものを抜粋）
値	値の示す意味
ease	加速をつけて、ゆっくりと始まり、ゆっくりと終わる。
ease-in	ゆっくりと始まり、一定速度で終わる。
ease-out	一定速度で始まり、ゆっくりと終わる。
ease-in-out	ゆっくりと始まり、ゆっくりと終わる。
linear	最初から最後まで一定の速度で変化する。

animation-directionプロパティに指定できる値
値	値の示す意味
normal	常にキーフレーム通りに再生する。
reverse	常に逆再生する。
alternate	繰り返しの際、キーフレーム通りの再生と逆再生を順に繰り返す。
alternate-reverse	繰り返しの際、逆再生とキーフレーム通りの再生を順に繰り返す。

animation-play-stateプロパティ

アニメーションの再生を一時停止させる際に使用するプロパティ。
pausedを指定すると一時停止し、runningを指定すると再生が開始します。初期値はrunning.。

animation-fill-modeプロパティ

animation-delayプロパティによって再生の開始が遅延している状態、および再生終了後の表示を設定するプロパティ。初期値はnone。

animation-fill-modeプロパティに指定できる値(逆再生の場合は0%と100%が逆になる)
値	値の示す意味
forwards	再生後は@keyframesの100%の表示のままにする。
backwards	animation-delayの間は@keyframesの0%の表示になる。
both	animation-delayの間は@keyframesの0%の表示、再生後は100％の表示になる。
none	@keyframes{}内の指定とは無関係に表示する。

animationプロパティ

アニメーション関連のプロパティの値をまとめて指定するプロパティ。
時間をあらわす値については、１つ目がanimation-durationプロパティの値、２つ目がanimation-delayプロパティの値となります。

アニメーションについてのサンプルソース

[サンプルコード]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta chrset="UTF-8">
  <title>animationプロパティのサンプル</title>
  <style>
    /* 背景色を、アニメーション開始時に白、50%時点でピンク、終了時に赤にする */
    @keyframes animation1{
      0% {background-color:white;}
      50% {background-color:pink;}
      100% {background-color:red;}
    }
    /* アニメーションの25%時点でボックスを右に90度、50%時点でピンク、終了時に赤にする */
    @keyframes animation2{
      0% {transform:rotate(0deg);}
      25% {transform:rotate(90deg);}
      50% {transform:rotate(180deg);}
      75% {transform:rotate(270deg);}
      100% {transform:rotate(360deg);}
    }
    .a1 {
      /* キーフレーム「animation」のアニメーションを1秒後から5秒間かけて再生、ゆっくり始まり、ゆっくり終わるを無限に繰り返す */
      animation:animation1 5s ease-in-out 1s infinite;
    }
    .a2 {
      /* 「animation2」というキーフレーム名を指定する */
      animation-name:animation2;
      /* アニメーションを10秒で再生する */
      animation-duration:10s;
      /* アニメーションを一定速度で再生する */
      animation-timing-function:linear;
      /* 1秒後にアニメーションを開始する */
      animation-delay:1s;
      /* アニメーションを3回再生する */
      animation-iteration-count:20;
      /* 再生を繰り返す場合は、普通再生、逆再生の順に繰り返す */
      animation-direction:aleternate;
      /* animation-delayの間はキーフレームの0％、再生終了後はキーフレームの100％の状態を表示する */
      animation-fill-mode:both;
    }
    .a1.a2 {
      width:300px;
      height:100px;
      text-align: center;
      line-height:150%;
      margin:30px;
      border:1px solid black;
    }
    }
  </style>
</head>
<body>
  <div class=a1>ボックスの背景色が、<br>一定速度で変化します。</div>
  <div class=a2>ボックスがゆっくり回転します。</div>
</body>
</html>
[表示]

ボックスの背景色が、
一定速度で変化します。

ボックスがゆっくり回転します。

まとめ

いかがだったでしょうか？
個人的にはJavaScriptを使用しなくても、HTMLに動きがつけられるというのは楽しいと思います！
今回はあまりサンプルコードに時間をかけられませんでしたが、これから色々試して生きたいと思っています！

最後までお読みいただき、ありがとうございました！

CSS3で動きをつける（トランジションとアニメーション） 2018/11/07 2021/07/14