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

Question

有没有办法用 JavaScript 改变 CSS3 关键帧动画的持续时间？在 CSS 中，您可以使用 animation-duration 属性来做到这一点:

animation-duration: 1s;

JavaScript 应该是原始的，我不想在我的网站中包含 jQuery 或其他 JS 库。

Answer 1

您可以在 javascript 中分配 css 类并将您的过渡/持续时间/动画放在这些 css 类中，或者您可以直接在 javascript 中分配您的 css。

document.getElementById('your_id').style.animationDuration="1s";

对于跨浏览器，我们可以使用 o、moz、ms 和 webkit 作为前缀。

例子-:

 document.getElementById('your_id').style.webkitTransitionDuration="1s";

EXAMPLE

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

//在 css 中

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

  @keyframes 'blink' {
   0% { background: rgba(255,0,0,0.5); }
   50% { background: rgba(255,0,0,0); }
   100% { background: rgba(255,0,0,0.5); 
}
//try moz for mozilla,o for opera and webkit for safari and chrome 
    .blink_css {
        -webkit-animation-name: blink;
        -moz-animation-name: blink;
        -o-animation-name: blink;
        animation-name: blink;
    }