单击按钮时如何播放CSS动画

Question

我创建了一个圆圈的CSS动画，它从HTML输入字段中获取值并根据这些值移动。我的问题是，当我单击一个按钮时，我希望圆圈移动，而不是在输入字段中输入值时立即移动。 这是我到目前为止的代码： Codepen

这是代码（HTML）：

＆＃13;

＆＃13;

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');
}

＆＃13;

: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; 
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的意思是？

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>