如何动态改变关键帧的值？

Question

我有以下代码来移动图像

@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 40%;}
}

现在我需要使用 javascript 更改左侧的值，即 40% 我该如何实现？

Answer 1

这里是transition的使用参考：

document.querySelector('.box').addEventListener('click', function() {
   // set the left value dynamically
   this.style.left = '40%';
});

/* cosmetics, ignore these */
.box {
  width: 100px;
  height: 100px;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* relevent styles */
.box {
  position: absolute;
  left: 0;
  transition: left 0.5s;
}

<div class="box">click me</div>

Answer 2

您可以使用 jquery animate function 来过渡 div 元素。检查以下示例：

$(document).ready(function(){
  $("#box").click(function(){
    $("#box").animate({
        left: '40%'
    });
  });
});

#box {
  background: #98bf21;
  height: 100px;
  width: 100px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="box"></div>

</body>
</html>

如何动态改变关键帧的值？

How to change value of keyframe dynamically?

javascript

jquery

keyframe

css-animations