如何使用原始JavaScript更改CSS3关键帧 - 动画的持续时间 [英] How to change the duration of a CSS3 keyframes-animation with raw JavaScript

问题描述

有什么方法可以使用JavaScript更改CSS3关键帧动画的持续时间？在CSS中你可以使用animation-duration属性：

Is there a way to change the duration of a CSS3 keyframes animation with JavaScript? In CSS you can do that with the animation-duration property:

animation-duration: 1s;

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

The JavaScript should be raw, i don't want to include jQuery or other JS librarys into my site.

推荐答案

您可以在javascript中分配css类，并将转换/持续时间/动画放在这些css类中。 css直接在javascript中。

You can assign css classes in javascript and put your transition/duration/animation in those css classes Or you can assign your css directly in javascript.

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

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

for cross browsers we can use o,moz,ms and webkit as prefix.

示例：

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

示例

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

这篇关于如何使用原始JavaScript更改CSS3关键帧 - 动画的持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！