Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away