如何动态更改关键帧的值？答案

【问题标题】：How to change value of keyframe dynamically?如何动态更改关键帧的值？
【发布时间】：2019-10-24 18:16:09
【问题描述】：

我有以下代码来移动图像

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

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

【问题讨论】：

对于动态动画，最好使用transition（例如transition: left 0.5s;）而不是animation，并直接通过javascript设置left的值。
你能提供任何参考吗？

标签： javascript jquery css-animations keyframe

【解决方案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;
}

&lt;div class="box"&gt;click me&lt;/div&gt;

【讨论】：

谢谢你在找这个:)

【解决方案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>

【讨论】：

谢谢你在找这个:)
不客气，如果有帮助请采纳。 :)