LoginSignup
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-28

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イベントだけ使いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2