簡単なアニメーション作成

JavaScript/HTML/CSS JavaScript

アニメーションは短い時間ごとに更新し続けることで表現

JavaScriptで回転し続けるアニメーションを作成

var example = document.getElementById('example');
var degree = 0;
function rotateAnimation() {
  degree = degree + 6;
  degree = degree % 360;
  if ((0 <= degree && degree < 90) || (270 <= degree && degree < 360)) {
    example.className = 'face';
  } else {
    example.className = 'back';
  }
  example.style.transform = 'rotateX(' + degree + 'deg)';
}
setInterval(rotateAnimation, 20);
  • HTMLのidと角度の変数を作成
  • rotateAnimationという関数を宣言
  • 関数が呼び出される度に角度を６増やす処理
  • 角度の数字が関数を呼び出す度に永遠と大きくなってしまうので360で割った余りを値にする。( degree = 0〜359 となる)
  • 0~90 と 270~360 の間を表としclass名を'face'それ以外を裏'back'とするif文
  • 'rotateX(degree変数deg)'で回転させる
  • setInterval関数で20ミリ秒ごとに繰り返す

CSSで表裏の色を変える

.face {
  color: darkblue;
}
.back {
  color: lightpink;
  opacity: 0.5;
}
  • opacity...不透明度　　0〜1の値を指定　1が完全に透明