如何使用javascript激活CSS3（webkit）动画？_Javascript_Css

如何使用javascript激活CSS3（webkit）动画？

javascript css

如何使用javascript激活CSS3（webkit）动画？,javascript,css,Javascript,Css,我真的卡住了。我想要一个我已经创建（下面）的CSS动画在点击一个div时激活。我认为我唯一可以做到的方法是使用javascript创建一个onClick事件。但是我不知道如何运行/引用css文件中的动画。有人能帮我吗这是我的css文件中的动画，我想通过单击div来运行它 @-webkit-keyframes colorchange { 0% { background-color: red; opacity: 1.0; -webkit-transform: scale(1.0

我真的卡住了。我想要一个我已经创建（下面）的CSS动画在点击一个div时激活。我认为我唯一可以做到的方法是使用javascript创建一个onClick事件。但是我不知道如何运行/引用css文件中的动画。有人能帮我吗

这是我的css文件中的动画，我想通过单击div来运行它

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

我甚至尝试将css与javascript（index.html）放在同一个文件中，并使用以下代码尝试在单击时激活它，但没有成功

<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>


功能颜色变化（测试）
{
test.style.webkitAnimationName='colorchange'；
}

请提供帮助：）

您缺少持续时间，并且在指定的名称中有一个尾随空格：

function colorchange( test )
{
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
    test.style.webkitAnimationDuration = '4s';
}

有关

@-webkit关键帧的更多信息：


更新
一些工作代码
<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>


@-webkit关键帧颜色更改{
0% {
背景色：红色；
不透明度：1.0；
-webkit变换：缩放（1.0）旋转（0度）；
}
33% {
背景颜色：蓝色；
不透明度：0.75；
-webkit变换：缩放（1.1）旋转（-5度）；
}
67% {
背景颜色：绿色；
不透明度：0.5；
-webkit变换：缩放（1.1）旋转（5度）；
}
100% {
背景色：红色；
不透明度：1.0；
-webkit变换：缩放（1.0）旋转（0度）；
}
}
函数颜色变化（e）{
如果（e.style.webkitAnimationName！=='colorchange'）{
e、 style.webkitAnimationName='colorchange'；
e、 style.webkitAnimationDuration='4s'；
//确保在4秒钟后重置名称，否则再次调用colorchange将不会产生任何效果
setTimeout（函数（）{
e、 style.webkitAnimationName=''；
}, 4000);
}
}
你好，世界！
谢谢，我没有看到尾随空格。但我还是有问题。例如，如果我这样做：test.style.height=“50px”；但是，如果我尝试调用通过以下操作预定义的自定义动画：test.style.webkitAnimationName='colorchange'；什么都不管用。有什么想法吗？你确定了持续时间吗？没有它是不行的。我用上面的CSS在本地测试了这些东西，效果很好。是的，我有一个持续时间，如果我将它指定给CSS悬停，动画效果会很好。但当我尝试使用javascript onclick使其发挥作用时，我就是无法让它工作。（onclick有效）。你用onclick工作了吗？非常感谢。看来是我糟糕的javascript把事情搞砸了。非常感谢你的帮助。