How do you use css keyframes animations with javascript

Question

Is there a way to make an object move with CSS keyframes by adding the animate property to a class. So that when you click on a certain button the class will be attached to the object, thus creating an animation? Here is the code for it

function start(){
  document.getElementById('up').onclick = function() {
    document.getElementById('red').className = "uppy";
  };

  document.getElementById('do').onclick = function() {
    document.getElementById('red').className = "downy";
  };
}

start();

#area {
  height: 400px;
  width: 400px;
  border: 1px solid black;
}
#red {
  height: 25px;
  width: 25px;
  background: red;
}
#btn-row { margin-top: 20px; }

div.downy {
  -moz-animation: down 1s;
  animation: down 1s;
}

div.uppy {
  -moz-animation: up 1s;
  animation: up 1s;
}

@keyframes down {
  from { top: 0; }
  to {top:5 0px; }
}

@-moz-keyframes down {
  from { top: 0; }
  to { top: 50px; }
}

@keyframes up {
  from { bottom: 0; }
  to { bottom: 50px; }
}

@-moz-keyframes up {
  from { bottom: 0; }
  to { bottom: 50px; }
}

<div id="area">
  <div id="red"></div>
</div> 
<div id="btn-row">
  <button id="up">Up</button>
  <button id="do">Down</button>
</div>

I couldn't get it to work in JSBin, so I copied it over to jsfiddle. Once I added position: absolute to the #red element, it worked! (might need some tweaking, but that's up to you) — BillyNate
– BillyNate, Commented Jul 2, 2016 at 21:20

guest271314 · Accepted Answer · 2016-07-02 21:26:29Z

1

Set position to relative at #red element, animation-fill-mode to forwards at .downy

function start() {
  document.getElementById('up').onclick = function() {
    document.getElementById('red').className = "uppy";
  };

  document.getElementById('do').onclick = function() {
    document.getElementById('red').className = "downy";
  };
}

window.onload = start;

#area {
  height: 400px;
  width: 400px;
  border: 1px solid black;
}
#red {
  height: 25px;
  width: 25px;
  background: red;
  position:relative;
}
#btn-row {
  margin-top: 20px;
}

div.downy {
  -moz-animation: down 1s;
  animation: down 1s;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
div.uppy {
  -moz-animation: up 1s;
  animation: up 1s;
}
@keyframes down {
  from {
    top: 0px;
  }
  to {
    top: 50px;
  }
}
@-moz-keyframes down {
  from {
    top: 0px;
  }
  to {
    top: 50px;
  }
}
@keyframes up {
  from {
    bottom: 0;
  }
  to {
    bottom: 50px;
  }
}
@-moz-keyframes up {
  from {
    bottom: 0;
  }
  to {
    bottom: 50px;
  }
}

<div id="area">
  <div id="red"></div>

</div>
<div id="btn-row">
  <button id="up">Up</button>
  <button id="do">Down</button>
</div>

answered Jul 2, 2016 at 21:26

guest271314

1

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

2 Comments

black_yurizan Over a year ago

Hey, is there a way to continue moving the object downward as I continue to click on the button. Or would I have to create something like that with javascript?

guest271314 Over a year ago

Should be possible, though beyond scope of actual Question "Is there a way to make an object move with CSS keyframes by adding the animate property to a class." ? Would need to change from { top: 0px; } which begins down animation at 0px

Ehsan · Accepted Answer · 2016-07-02 21:36:15Z

0

change javascript to :

<script>
        function start() {
              document.getElementById('up').onclick = function(){
                 document.getElementById('red').className = "uppy";
              }

              document.getElementById('do').onclick = function(){
                document.getElementById('red').className = "downy";

            }
        }
        window.onload =start;

    </script>

insert 'position:relative;' to #red in css to :

#red{ height:25px; width:25px; background:red; position:relative;}

edited Jul 2, 2016 at 21:36

answered Jul 2, 2016 at 21:29

Ehsan

13k3 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

How do you use css keyframes animations with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related