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

Question

Im really stuck. 我真的卡住了。 I want a CSS animation I have created (below) to activate on clicking a div. 我想要一个我创建的CSS动画（下面）来点击一个div激活。 The only way I thought I could do that was using javascript to create an onClick event. 我认为我能做到的唯一方法是使用javascript创建onClick事件。 However I dont know how to run/refrence the animation that is in my css file. 但是我不知道如何运行/参考我的css文件中的动画。 Can anyone help me? 谁能帮我？

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 :) 请帮忙：）

Answer 1

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 : @-webkit-keyframes上的更多信息：
http://webkit.org/blog/324/css-animation-2/ 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>

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

问题描述

1 个解决方案

解决方案1
14 已采纳 2010-12-05 13:15:13

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

问题描述

1 个解决方案

解决方案1 14 已采纳 2010-12-05 13:15:13

解决方案1
14 已采纳 2010-12-05 13:15:13