CSS3 animation for rotation of an image, with parameters controlled by javascript

I would like to continuously rotate an image efficiently -- it must work smoothly on mobile browsers. I am currently using CSS3 animation. I would like to be able to control the CSS functionality using javascript (start, stop, set rotation speed, easing for extra credit). Here is what I have so far to do the rotation itself. JS needed.

Thanks!

HTML:

<img class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt=""> 

CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JS: TODO

Rotate = {
  speed: 4,
  start: function () {
  },
  stop: function () {
  },
  setSpeed: function () {
  },
  setEasing: function () {
  }
};

Answers


CSS3 animation functionality can be manipulated by javascript, based on your question the code would be something like this.

    start: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'running';
    },
    stop: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'paused';
    },
    setSpeed: function (newSpeed) {
        var elem = document.getElementById('elementId');
        elem.style.animationDuration= newSpeed;
    },
    setEasing: function (newEasing) {
        var elem = document.getElementById('elementId');
        //whatever you want to change
    }

Update

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      -webkit-animation: spin 4s linear infinite;
      -moz-animation: spin 4s linear infinite;
      animation: spin 4s linear infinite;
    }
    @-moz-keyframes spin {
      100% {
        -moz-transform: rotate(360deg);
      }
    }
    @-webkit-keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    @keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <img id="theImage" class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">
  <button onclick="Rotate.start()">Start</button>
  <button onclick="Rotate.stop()">Stop</button>
  <button onclick="Rotate.setSpeed('1s')">Speed</button>
  <button onclick="Rotate.setEasing()">Earsing</button>
  <script>
    Rotate = {
      speed: 4,
      start: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'running';
      },
      stop: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'paused';
      },
      setSpeed: function(newSpeed) {
        var elem = document.getElementById('theImage');
        elem.style.animationDuration = newSpeed;
      },
      setEasing: function(newEasing) {
        var elem = document.getElementById('theImage');
        //whatever you want to change
      }
    };
  </script>
</body>

</html>

Need Your Help

How to use JS require() without Node.js

javascript node.js require

This is probably a lame question, but how can you achieve the same thing as require() (Node.js) in regular JavaScript?