[英]How to change the duration of a CSS3 keyframes-animation with raw JavaScript
Is there a way to change the duration of a CSS3 keyframes animation with JavaScript? 有没有办法用JavaScript改变CSS3关键帧动画的持续时间? In CSS you can do that with the animation-duration property:
在CSS中,您可以使用animation-duration属性执行此操作:
animation-duration: 1s;
The JavaScript should be raw, i don't want to include jQuery or other JS librarys into my site. JavaScript应该是原始的,我不想将jQuery或其他JS库包含到我的站点中。
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. 您可以在javascript中分配css类并将转换/持续时间/动画放在那些css类中或者您可以直接在javascript中分配您的CSS。
document.getElementById('your_id').style.animationDuration="1s";
for cross browsers we can use o,moz,ms and webkit as prefix. 对于跨浏览器,我们可以使用o,moz,ms和webkit作为前缀。
Example-: 例-:
document.getElementById('your_id').style.webkitTransitionDuration="1s";
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
// In 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.