CSS アニメーション

CSS アニメーションは JavaScript を使うことなく簡単なアニメーションを行うことができます。

JavaScript を利用することで、CSS アニメーションを制御し、少しのコードでより優れたものにすることができます。

CSS のトランジション

CSS トランジションの考えはシンプルです。これから、そのプロパティとその変化がどのようにアニメーション化されるかを説明します。プロパティが変更されると、ブラウザはアニメーションを描写します。

つまり: 必要なことはプロパティを変更することだけです。そして滑らかなトランジションはブラウザによって行われます。

例えば、下の CSS は background-color の変化を 3秒間アニメーション化します。:

          .animated {
  transition-property: background-color;
  transition-duration: 3s;
}
        

今、ある要素が .animated クラスを持っている場合、background-color の変更は3秒間でアニメーションされます。

下のボタンをクリックして、背景をアニメーションさせてみてください。:

<button id="color">Click me</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

CSS トランジションを記述するのに 4 つのプロパティがあります:

transition-property
transition-duration
transition-timing-function
transition-delay

この後説明していきますが、今の時点では、共通の transition プロパティは property duration timing-function delay の順番で一緒に宣言できること、複数のプロパティを一度にアニメーションすることができることに留意しておいてください。

例えば、このボタンは color と font-size をアニメーションします。:

<button id="growing">Click me</button>

<style>
#growing {
  transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

ではアニメーションのプロパティを1つずつ見ていきましょう。

transition-property

transition-property には、アニメーションするプロパティの一覧を記載します。例えば: left, margin-left, height, color です。

すべてのプロパティがアニメーションできるわけではありませんが、それらの多くが可能です。値 all は “すべてのプロパティをアニメートする” を意味します。

transition-duration

transition-duration では、どのくらいの長さアニメーションをするかを指定することができます。時間は CSS 時間形式で表します: 秒は s, ミリ秒は ms です。

transition-delay

transition-delay では、アニメーションする前の遅延を指定することができます。例えば、transition-delay: 1s を指定した場合、アニメーションはある変更の1秒後に始まります。

負の値も可能です。その場合、アニメーションは途中から始まります。例えば、transition-duration が 2s で、遅延が -1s の場合、アニメーションは1秒を取り、半分から開始します。

これは CSS translate プロパティを使って、0 から 9 までの数字をシフトするアニメーションです:

結果

script.js

style.css

index.html

stripe.onclick = function() {
  stripe.classList.add('animate');
};

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:

  <div id="digit"><div id="stripe">0123456789</div></div>

  <script src="script.js"></script>
</body>

</html>

transform プロパティは次のようにアニメーションされます:

          #stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}
        

上の例では、JavaScript は要素にクラス .animate を追加し – それによりアニメーションを開始しています。:

stripe.classList.add('animate');

“途中から” 始めることも可能です。負の値 transition-delay を使って、例えば、現在の秒数に対応する正確な数値から始めることができます。

ここでは、数字をクリックすると – 現在の秒数からアニメーションが始まります。:

結果

script.js

style.css

index.html

stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:
  <div id="digit"><div id="stripe">0123456789</div></div>

  <script src="script.js"></script>
</body>
</html>

JavaScript は追加の行でそれをしています。:

          stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  // 例えば、ここで -3s は3番目からアニメーションを開始します
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};
        

transition-timing-function

タイミング関数はアニメーションプロセスが時間と共にどのように広がっていくかを記述します。ゆっくりと始まりその急速に進む、またはその逆もありえます。

これは一見すると最も複雑なプロパティです。しかし少し時間をかけて見れば、非常に簡単のものになります。

このプロパティは2種類の値を受け取ります: ベジェ曲線またはステップです。より頻繁に使われる曲線から見ていきましょう。

ベジェ曲線

タイミング関数は次の条件を満たす4つの制御点をもつベジェ曲線として設定できます。:

最初の制御点: (0,0).
最後の制御点: (1,1).
中間点については、x の値は区間 0..1 になければならず、y は何でも構いません。

CSS でのベジェ曲線の構文です: cubic-bezier(x2, y2, x3, y3)。ここでは 2番目と3番目の制御点だけを指定します。なぜなら、最初の点は (0,0) 固定であり、4番目は (1,1) 固定だからです。

タイミング関数は時間の中でアニメーション処理がどのような速さで進むかを記述します。

x 軸は時間です: 0 – は開始時点、1 – は transition-duration の最後の瞬間です。
y 軸は処理の完了を指定します: 0 – はプロパティの開始値であり, 1 – は終わりの値です。

最もシンプルなバリアントは、同じ線形の速度でアニメーションが均一に進む場合です。それは曲線 cubic-bezier(0, 0, 1, 1) として指定することができます。

これは、その曲線がどのように見えるかを示したものです:

…ご覧の通り、単なる直線です。時間(x)が過ぎるに連れて、アニメーションの完了(y)は着実に 0 から 1 に進みます。

下の例にある電車は、左から右へ一定の速度で移動します(クリックしてみてください):

結果

style.css

index.html

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">

</body>

</html>

CSS transition はその曲線に基づいています:

          .train {
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
  /* JavaScript sets left to 450px */
}
        

…そして電車をスローダウンさせるにはどうすれば良いでしょうか？

別のベジェ曲線を使うことで実現できます: cubic-bezier(0.0, 0.5, 0.5 ,1.0).

グラフは次のようになります:

見てわかるように、処理は速く始まります: 曲線は高くなっていき、その後遅くなっていきます。

タイミング関数は次のように動作します(電車をクリックしてください):

結果

style.css

index.html