如何使用 javascript 激活 CSS3 (webkit) 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4358892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to activate a CSS3 (webkit) animation using javascript?
提问by user531192
Im really stuck. I want a CSS animation I have created (below) to activate on clicking a div. The only way I thought I could do that was using javascript to create an onClick event. However I dont know how to run/refrence the animation that is in my css file. Can anyone help me?
我真的卡住了。我想要一个我创建的 CSS 动画（如下）在点击一个 div 时激活。我认为我能做到的唯一方法是使用 javascript 创建一个 onClick 事件。但是我不知道如何运行/引用我的 css 文件中的动画。谁能帮我？
This is the animation in my css file that I want to run by clicking on a div.
这是我想通过单击 div 运行的 css 文件中的动画。
@-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
I even tried putting the css in the same file as the javascript (index.html) and used the following code to try and activate it on click, but no luck.
我什至尝试将 css 与 javascript (index.html) 放在同一个文件中，并使用以下代码尝试在单击时激活它，但没有运气。
<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>
Please help :)
请帮忙 ：）
回答by Ivo Wetzel
You're missing the duration and you have a trailing space in the name you assign:
您缺少持续时间，并且您分配的名称中有一个尾随空格：
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
test.style.webkitAnimationDuration = '4s';
}
Some more infos on @-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/
更多信息@-webkit-keyframes：http:
//webkit.org/blog/324/css-animation-2/
update
更新
Some working code.
一些工作代码。
<html>
<head>
<style>
@-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
</style>
<script>
function colorchange(e) {
if (e.style.webkitAnimationName !== 'colorchange') {
e.style.webkitAnimationName = 'colorchange';
e.style.webkitAnimationDuration = '4s';
// make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect
setTimeout(function() {
e.style.webkitAnimationName = '';
}, 4000);
}
}
</script>
</head>
<body>
<div onclick="colorchange(this)">Hello World!</div>
</body>
</html>
