Как изменить скорость вращения элемента в CSS

Question

Итак, элемент, которым я манипулирую, имеет идентификатор вращения и класс роторов

Я могу заставить свой элемент вращаться. Я сделал это с помощью кода css здесь:

.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation:spin .5s linear infinite;
-moz-animation:spin .5s linear infinite;
animation:spin .5s 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);}}

Но, скажем, вместо того, чтобы он автоматически вращался при загрузке страницы, я мог нажать кнопку с идентификатором, равным единице, и она начала вращаться, и если я нажму вторую кнопку с идентификатором два, она будет вращаться даже быстрее, чем первая.

Я не уверен, как этого добиться. Я видел, где некоторые люди указывали, что вы можете изменить css элемента, используя javascript, но я не уверен, как этого добиться, особенно при нажатии кнопки. Я хочу, чтобы это было что-то вроде getElementById(spinning).style.property =, но по нажатию кнопки и просто изменяя скорость вращения моего элемента.

Answer 1

Один из вариантов - динамическое изменение свойства animation-duration CSS с помощью JavaScript.

.

var rotors = document.querySelector(".rotors");

function fast() {
  rotors.style.animationDuration = ".2s";
}
 
function slow() {
  rotors.style.animationDuration = ".5s";
}

.rotors {
  height: 50px; /* for demo purpose */
  width: 50px;  /* for demo purpose */
  animation: spin .5s linear infinite;
}

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

<p>
  <button onclick="fast()">Fast</button>
  <button onclick="slow()">Slow</button>
</p>
<img class="rotors" src="https://cdn.onlinewebfonts.com/svg/img_489361.png" />

Answer 2

Это хорошее место для использования CSS пользовательской переменной . Когда кнопка нажата, мы переключаем вторичный класс на .rotors div. Когда присутствует класс faster, пользовательская переменная сбрасывает скорость анимации на более высокую скорость, которая автоматически применяется к анимации.

const rotors = document.querySelector('.rotors'); 
const btn = document.querySelector('.rotorButton');

btn.addEventListener('click', () => {
  rotors.classList.toggle('faster')
});

.rotors {
  --spin-speed: 2s; /* Initial speed */
  position: relative;
  top: 40px;
  left: 30px;
  background-color: yellow;
  color: black;
  display: inline-block;
  animation: spin var(--spin-speed) linear infinite;  
}

.rotors.faster {
  --spin-speed: .5s; /* Faster speed ? */
}

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

<div class="rotors">text</div>
<button class="rotorButton" type="button">Toggle Rotor Speed</button>

jsFiddle

Answer 3

Добавьте 2 кнопки и используйте их для изменения классов, как показано ниже:

function startSpinning(){
  var spDiv = document.getElementById('test');
  if(spDiv.classList.contains('rotorsFast')){
    spDiv.classList.remove('rotorsFast');
    spDiv.classList.add('rotors');
  }else{
  spDiv.classList.add('rotors');
  }
  
}

function startSpinningFast(){
  var spDiv = document.getElementById('test');
  if(spDiv.classList.contains('rotors')){
    spDiv.classList.remove('rotors');
    spDiv.classList.add('rotorsFast');
  }else{
   spDiv.classList.add('rotorsFast');
  }
}

.rotors {
  position: relative;
  top: 90px;
  left: 30px;
  -webkit-animation: spin .5s linear infinite;
  -moz-animation: spin .5s linear infinite;
  animation: spin .5s linear infinite;
}
.rotorsFast {
  position: relative;
  top: 90px;
  left: 30px;
  -webkit-animation: spin .2s linear infinite;
  -moz-animation: spin .2s linear infinite;
  animation: spin .2s 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);
  }
}

<div id="test" style="width:20px">apple</div>
<button onclick="startSpinning()">spin</button>
<button onclick="startSpinningFast()">spin Fast</button>