CSSアニメーション初心者備忘録

CSSで様々なアニメーションができると知ってはいたけれども、触ってみたら割とわからないことだらけだったので、備忘録。

やりたいこと

div要素をアニメーションさせて、ボタンで何らかの操作をする

デモ
###やったこと

• div要素をCSS animation で回転させる
• div要素を複製する
• 回転させる速度を変更する -1
• 回転させる速度を変更する -2

####div要素をCSS animation で回転させる
div要素を作ります。

<div class="squareBox"></div>

CSSを書きます

.squareBox{
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: aqua;
      margin-top: 50px;
      margin-left: 50px;
}

上記CSSに以下の一文を書き込みます。
animation要素というものがあることに気が付かされます。
今回は30秒で○○するみたいなことを書きたかったの以下になりました。

animation: rotate 30s linear infinite;

@keyframesで、rotateを定義します。
360度回転するということを書くだけです。

@keyframes rotate{
      100%{ transform: rotate(360deg);}
}

回転しました。

####div要素を複製する
htmlにボタン要素を追加します。

<button id="addSquare" class="asBtn">click</button>

位置調整にCSS追記します。

.asBtn{
      margin-top: 50px;
}

jQuery使いました。
これで、clickボタンを押すと、<div>要素が追加されます。

$(function(){
      $("#addSquare").click(function(){
          $("body").append('<div class="squareBox"></div>');
      });
});

####回転させる速度を変更する -1
取り合えず、CSSの書き換え方がわからなかったので、ボタンを押すとCSSが書き換わるコードを探しました。

htmlにボタンを追加しました。

<button id="speedChange" class="scBtn">speed</button>

jsに追記。
これで、<div>要素が1回転するスピードが30秒から15秒になります。

$("#speedChange").click(function(){
      $(".squareBox").css('animation','rotate 15s linear infinite');
});

####回転させる速度を変更する -2
回転する速度を可変にしたいと思いスライダをつけました。
htmlにスライダを追加。

<input type="range" name="speedNum" id="speedNum" max="30" min="1" step="1">

js側で、スライダの値を取って、ボタンを押すとその値で回るように設定。

$("#speedChange").click(function(){
      var spnum = $("#speedNum").val();
      $(".squareBox").css('animation','rotate ' + spnum + 's linear infinite');
});

終わりです。良かったですね。

inputのon要素などでイベント発出しても良かったのですが、今回はclickイベントだけ使いました。