无法在javascript中更新css动画持续时间

在JavaScript中更新CSS动画持续时间时遇到问题，可能是由于以下几个原因导致的：

基础概念

CSS动画通过@keyframes规则定义，并通过元素的animation属性应用到元素上。JavaScript可以通过修改元素的style.animationDuration属性来动态改变动画的持续时间。

类型与应用场景

类型：CSS动画、JavaScript控制的动画。
应用场景：用户界面反馈、游戏中的角色动作、数据可视化等。

可能的问题及原因

样式未正确应用：可能是因为JavaScript代码没有正确执行，或者CSS选择器没有匹配到目标元素。
优先级问题：内联样式（通过JavaScript设置的）通常优先级高于外部或内部样式表中的样式。
动画重置：修改持续时间可能不会立即生效，因为浏览器可能已经缓存了动画的关键帧。

解决方法

以下是一个示例代码，展示如何在JavaScript中更新CSS动画的持续时间：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Animation Duration</title>
<style>
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: slideIn 2s infinite;
  }
</style>
</head>
<body>

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

<button onclick="updateDuration()">Change Duration</button>

<script>
function updateDuration() {
  const box = document.querySelector('.box');
  // 更新动画持续时间为3秒
  box.style.animationDuration = '3s';
}
</script>

</body>
</html>

关键点解释

选择器：确保使用正确的选择器来获取目标元素。
属性设置：直接通过element.style.animationDuration来设置新的持续时间。
测试：在不同的浏览器中测试以确保兼容性。

如果上述方法仍然无法解决问题，可以尝试以下步骤：

检查控制台：查看是否有JavaScript错误。
强制重绘：通过改变元素的某些其他样式（如offsetHeight）来强制浏览器重绘元素。
强制重绘：通过改变元素的某些其他样式（如offsetHeight）来强制浏览器重绘元素。
使用CSS变量：定义一个CSS变量来控制持续时间，然后在JavaScript中更新这个变量的值。
使用CSS变量：定义一个CSS变量来控制持续时间，然后在JavaScript中更新这个变量的值。
使用CSS变量：定义一个CSS变量来控制持续时间，然后在JavaScript中更新这个变量的值。

通过这些方法，应该能够解决在JavaScript中更新CSS动画持续时间的问题。

无法在javascript中更新css动画持续时间

、、

marquee{ transform: translate(10%, 0); transform: translate(-100%, 0); var spnSelect = document.querySelectorAll('.marquee'timeTaken = spnLen / speed;

浏览 26提问于2020-08-27得票数 0

1回答

无法在iOS浏览器和桌面safari中使用javascript更新CSS动画

、、、

我正在尝试在react应用程序中使用javascript更改CSS动画持续时间。我的解决方案适用于mac os chrome，但在mac os safari和iOS safari chrome中无法更新。我尝试过手动添加webkit前缀(使用create react app，它应该已经自动添加前缀了)，将动画更改为“动画”而不是“动画持续时间”，但无济于事。calendar spa

浏览 0提问于2019-08-01得票数 0

1回答

提高硬件加速css3动画的速度

、、、

我正在尝试在使用硬件加速的css3动画期间动态增加动画持续时间。使用javascript和非硬件加速的css3，我只是增加了动画的持续时间，动画速度就会加快。现在我使用translate3d而不是left属性来设置动画，增加动画持续时间是不起作用的。我有一种感觉，一旦动画卸载到GPU上，对css的更改不会对其产生任何影响。当我做

浏览 3提问于2011-06-22得票数 0

回答已采纳

1回答

可以一直使用0持续时间的.animate吗？还有更好的选择吗？

、、

我已经习惯于通过以下操作编写jquery动画代码。下面是一个例子。/

浏览 0提问于2013-07-16得票数 7

回答已采纳

2回答

用javascript动画CSS3变换值会排除硬件加速吗？

、、、

通过设置动画持续时间并设置CSS3变换的初始值和终值，可以利用硬件加速动画。如果不是设置动画持续时间和使用关键帧，而是直接使用JavaScript为所需CSS3变换的值设置动画，会发生什么情况？

浏览 1提问于2012-01-09得票数 6

回答已采纳

1回答

使用javascript在webkit遮罩位置动画之间等待5秒

、、、、

我正在做一个CSS闪亮的图标效果，到目前为止，我已经创建了使用webkit掩模效果，下面是我的代码片段 .hm-instagram:before{ from { -webkit-mask-position: 150%; }} 但现在我希望这个动画每5秒重复一次，就像每个动画循环之间有5秒的延迟。我不确定如何使用javascript

浏览 21提问于2021-08-01得票数 0

1回答

如何在Javascript中使用@Keyframe

、

因为我想让动画在css中开始，但在90%，我希望它发生在Javascript中。因此动画将继续，并且在js动画开始之前不会停止。

浏览 3提问于2021-09-05得票数 0

1回答

smoothstate.js反转动画

、、

在smoothstate.js库中的场景元素的反向动画方面有一些问题。我在这个网站上工作：.animated .scene_element{ -webkit-animation-duration

浏览 2提问于2014-10-13得票数 2

1回答

如何改变里程计/变速表中的动画持续时间

、

基于Odometer doc <IOdometer auto="false" class="iOdometer" :duration="10000" :value="f_value" format="d" /> 有什么方法来设置动画

浏览 3提问于2020-01-03得票数 0

1回答

在事件触发器上添加动画

、、、

基本上，当我从状态中删除一个项目时，或者当我按下按钮时，我想要添加动画。如果能帮上忙我会很感激的。谢谢。

浏览 15提问于2021-03-01得票数 0

3回答

Owl旋转木马动画速度

、

我有一个猫头鹰的旋转木马，大约在页面的一半：<script> navText: ['<span>prev</span>', '<span>next</

浏览 0提问于2018-12-16得票数 0

1回答

停止和启动的水平滚动动画

、

我有问题的动画，不断滚动，直到用户盘旋在其中一个图像。当用户悬停在图像之外时，包含动画的函数将再次启动。问题是，由于动画是由边距的大小决定的，并且持续时间被设置为一个静态数字，所以当动画再次启动时，不管边距有多小，总是要花费15000毫秒才能完成。因此，当用户在图像上盘旋时，当它几乎离开页面时，整个动画就会显着地减慢。对于如何使动画的持续时间相对于保证金的大小，有什么想法吗？duration: 15000, easin

浏览 2提问于2015-12-25得票数 0

回答已采纳

2回答

在CSS3动画完成时有回调吗？

、、

有没有办法在css3动画的情况下实现回调函数？在Javascript动画的情况下，这是可能的，但在css3中找不到任何方法。我可以看到的一种方式是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器UI队列。我想要一种更健壮的方法。有什么线索吗？

浏览 47提问于2011-05-31得票数 95

回答已采纳

1回答

如何使用原始JavaScript更改动画关键帧的持续时间

、、、

有没有办法使用JavaScript更改CSS3关键帧动画的持续时间？在CSS中，您可以使用animation-duration属性来执行此操作：JavaScript应该是原始的，我不想在我的站点中包含jQuery或其他JS

浏览 0提问于2013-07-21得票数 5

回答已采纳

2回答

动画持续时间在Safari中运行不正常

、、、、

我们正在做一个简单的项目，其中我们使用CSS动画。我们正在尝试使用JavaScript更改动画持续时间。更改动画持续时间在除safari和iOS之外的所有浏览器中都有效。我们使用这段代码来改变动画的持续时间。data.pulse+"ms" document.getElementById("circle").style.webkitAnimationDuration = data

浏览 1提问于2015-06-25得票数 0

2回答

Javascript在PHP中触发CSS动画？

、、、

我想让它，所以当一个人尝试登录，而凭据是不正确的，它会播放一个摇CSS动画。动画已经建立起来了。@charset "utf-8";div#Heading {text-align center; background<link rel="stylesheet" type="tex

浏览 1提问于2013-08-02得票数 1

回答已采纳

1回答

在jQuery动画结束之前运行函数

、、

我有一个滚动滚筒，使用prev/next按钮动画滚动。动画的持续时间是根据移动的距离计算的，因此持续时间是可变的。，我想刷新用户界面(按钮)，您可以看到这是通过更新两个数据属性完成的。到目前为止，我尝试了两种不同的选择：我使用CSS转换延迟，以使更新发生以后，但不能完全协调它与可变的持续时间的动画-有时它可能是出路。2.在<

浏览 0提问于2018-06-21得票数 0

1回答

当使用较大的背景图像时，jquery动画在internet explorer中不稳定。

、、、

我有一个jquery lavalamp动画菜单，它位于大背景图像的顶部。有什么办法解决这个问题吗？

浏览 1提问于2010-09-24得票数 2

1回答

在Safari中，Jquery应用-webkit-动画样式而不是-webkit-动画-持续时间样式

、、、

当我在Chrome2.1.3中尝试更改-webkit-动画-持续时间样式时，它应用的是-webkit-动画样式，实质上覆盖了之前通过jQuery样式表应用的所有动画。我发现的唯一解决办法是通过.attr设置样式，但这会覆盖我现有的内联样式，并且对于我正在更新的速度来说，进行搜索和替换将是过于密集的。下面是jQuery代码： $('.mask').css("-webkit-animation-duration",

浏览 3提问于2015-02-25得票数 0

1回答

CSS关键帧动画可以在Angular的ng-animate指令中使用吗？

、

下面是，它以动画的方式插入列表中的项目。这使用-webkit-transform将插入从scale(0)缩放到scale(1)。将ng-animate="' insert '“切换为ng-animate="'fader'”将使用Javascript动画来插入项。但是:我希望能够在这里使用CSS关键帧动画。列表中的最后一个条目是硬编码的，并使用"float-enter-start“类。我似乎不能让ng

浏览 1提问于2013-04-16得票数 1

点击加载更多