How to play a CSS animation when I click a button

Question

I have created a CSS animation of a circle that takes values from a HTML input field and moves based on these values. My problem is that I want the circle to move when I click a button and NOT as soon as I type the values in the input field. Here is a codepen of what I have so far: Codepen

and here is the code (HTML):

const inputs = [].slice.call(document.querySelectorAll('.controls input'));

inputs.forEach(input => input.addEventListener('input', update));

function update() { 
  var property = `--${this.id}`;
  document.documentElement.style.setProperty(property, (this.value * 10) + 'px');
}

:root {
     --x: 0px;
     --y: 0px;}

    #circle {
      margin-top: 50px;
      margin-left: 450px;
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 15px;
      transform: translateX(var(--x)) translateY(var(--y)) ;
      transition: all 0.5s linear; 
    }

    body {
     text-align: center;
     background: #ffc600;
     color: white;
     font-weight: 30;
     font-size: 30px;
   }
   
    .controls {
     margin-top: 50px;
     position: relative;
   }
   
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

<div class="controls">
  <label>start</label>
  <input type="number"  id="x" min="0" max="12"   >
  <label>end</label>
  <input type="number" id="y" min="0" max="12"  >
  <input type="button" id="demo"  value="play"></div>
<div id="circle"></div>

Run the code in the click event of the play button

Jose Paredes
– Jose Paredes

2018-02-23 13:41:11 +00:00
Commented Feb 23, 2018 at 13:41 — Jose Paredes
– Jose Paredes, Commented Feb 23, 2018 at 13:41

nullqube · Accepted Answer · 2018-02-23 13:50:43Z

you mean this?

var $x = document.getElementById("x");
var $y = document.getElementById("y");
document.getElementById("demo").onclick = function() {
  document.documentElement.style.setProperty("--x", ($x.value * 10) + 'px');
  document.documentElement.style.setProperty("--y", ($y.value * 10) + 'px');
}

:root {
     --x: 0px;
     --y: 0px;}

    #circle {
      margin-top: 50px;
      margin-left: 450px;
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 15px;
      transform: translateX(var(--x)) translateY(var(--y)) ;
      transition: all 0.5s linear; 
    }

    body {
     text-align: center;
     background: #ffc600;
     color: white;
     font-weight: 30;
     font-size: 30px;
   }
   
    .controls {
     margin-top: 50px;
     position: relative;
   }
   
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

<div class="controls">
  <label>start</label>
  <input type="number"  id="x" min="0" max="12"   >
  <label>end</label>
  <input type="number" id="y" min="0" max="12"  >
  <input type="button" id="demo"  value="play"></div>
<div id="circle"></div>

Collectives™ on Stack Overflow

How to play a CSS animation when I click a button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related