CSSでのアニメーションを作る大切な知識1選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

色が変わるアニメーションを作る。

今回は、前回の「中3男子が解説するCSSでのアニメーションを作る大切な知識。」の続きでCSSでのアニメーションを作る学習の続きを解説していきます。
回転して裏になった時、色が変わるようにしてみましょう。


CSS ファイルに新しい back というクラスを用意します。


.face {

  color: darkblue;

}
+
.back {
+
  color: lightgray;
+
}
Please Type!

次に、JavaScript コードで、回転して裏を向いた瞬間に class を変更するコードを書きます。
JavaScript で class を変更したい場合は、 setAttribute を使います。


let heading = document.getElementById('heading');

let degree = 0;

function rotateHeading() {

  degree = degree + 6;
+
  degree = degree % 360;
+
  if (degree === 90) {
+
    heading.setAttribute('class', 'back');
+
  } else if (degree === 270) {
+
    heading.setAttribute('class', 'face');
+
  }

  heading.style.transform = 'rotateX(' + degree + 'deg)';

}

setInterval(rotateHeading, 20);
Please Type!

変数 degree は角度で、 361 度と 1 度は同じものです。
ですので、 360 で割った余りを計算して、 degree の値を 0~359 に収めます。
以下がそのコードです。

degree = degree % 360;

次に、 0 度から始めて角度を増やしていくと、 90 度のときにちょうど文字が画面と垂直になります「表面が上を、裏面が下を向いている状態」。
90 度を超えると裏面が見え始め、裏面が見えている状態がそこから 180 度続き、角度が 270 度になったところで再び文字が画面と垂直になります、「表面が下を、裏面が上を向いている状態」。
270 度を超えると表面が見え始め、表面が見えている状態で 90 度回転して、ちょうど 360 度になります。

角度が 90 度のときに表面から裏面へ、角度が 270 度のときに裏面から表面へ変わります。実装すると以下のようになります。

if (degree === 90) {
 heading.setAttribute('class', 'back');
} else if (degree === 270) {
 heading.setAttribute('class', 'face');
}
この setAttribute で見出しの class 名を指定しています。
html 上では、 <h1 id="heading" class="face">CSS を使ったプログラミング</h1> の class="face" 部分です。

これで、 Chrome で動きを確認してみましょう。 このように回転して、裏表が入れ替わる文字を作ることができます。

まとめ

今回はCSSの詳しいアニメーションの作り方について解説しました。やはり自分にとってアニメーションを作るのはかなり難しく、かなり時間がかかってしまいました。
これからも時間をかけてもしっかり知識は学んでいけるよう学習していきたいです。