manipulate CSS animations with javascript

Question

This is a simple question, but I'm pretty new to programming and I'm not exactly sure how to do this.

I have a div that moves on a button press

var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');

box.addEventListener('click', function() {
  checkbox.checked = true;
});

#box {
  position: absolute;
  transform: translate3d(0, 0, 0);
  height: 20%;
  width: 20%;
  background-color: red;
 }

@keyframes moveRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  60% {
    transform: translate3d(120%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
 }

#checkbox:checked ~ #box {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="checkbox" />
    <div id="box">
    </div>
  </body>
 </html>

This is a simple animation, so doing it this way isn't really an issue for this case. The issue is when I want to add another animation to it via a checkbox, it sees that both checkboxes are "checked" and it runs both animations. With javascript and without a checkbox, how can I do the following:

-add a css animation -remove it when I want to use another animation

Thanks!

Could you explain more about your expected behavior? It's not clear to me. Maybe post another example of it not working the way you want, or what you have tried to do so far. — jered
– jered, Commented Feb 12, 2016 at 0:05

BezobidnijPsih · Accepted Answer · 2016-02-12 00:21:07Z

1

This can be done, for example, by adding/removing a css class of box element. (If I understood your question correctly)

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var box1 = document.getElementById('box1');

button1.addEventListener('click', function() {
    box1.className = "";
    box1.className += " moving-box-right";
});
button2.addEventListener('click', function() {
    box1.className = "";
    box1.className += " moving-box-left";
});


#box1 {
  position: absolute;
  transform: translate3d(0, 0, 0);
  height: 20%;
  width: 20%;
  background-color: red;
 }

@keyframes moveRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  60% {
    transform: translate3d(120%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
 }
 @keyframes moveLeft {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
  }
 }

.moving-box-right {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.moving-box-left {
  animation-name: moveLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}


<!DOCTYPE html>
<html>
  <body>
    <button id="button1">Move box right</button>
     <button id="button2">Move box left</button>
    <div id="box1"></div>
  </body>
 </html>

https://jsfiddle.net/kdnzqx52/2/

answered Feb 12, 2016 at 0:21

BezobidnijPsih

546 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kody R. Over a year ago

Yepp, you definitely understood me correctly! That makes sense now to put the animation inside of a class and just add on that class. Would it be better to use .classlist.add("class") or classlist.remove("class") so I avoid accidentally forgetting the "+"?

Collectives™ on Stack Overflow

manipulate CSS animations with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related