How to activate a CSS3 (webkit) animation using javascript?

Question

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?

This is the animation in my css file that I want to run by clicking on a 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);
 }
}

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.

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

Please help :)

Ivo Wetzel · Accepted Answer · 2010-12-05 14:25:19Z

14

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/

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>

edited Dec 5, 2010 at 14:25

answered Dec 5, 2010 at 13:15

Ivo Wetzel

46.8k17 gold badges102 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user531192 Over a year ago

Thanks for that, I didn't see the trailing space. But I still have the problem. if I do this for example: test.style.height="50px"; it will animate and work, however if I try calling a custom animation that I have predefined by doing this: test.style.webkitAnimationName = 'colorchange'; nothing works at all. Any ideas on that?

Ivo Wetzel Over a year ago

Did you set the duration? It won't work without one. I tested the stuff locally with your CSS above and it worked.

user531192 Over a year ago

Yeah I have a duration, and the animation works fine if I assign it to a css hover over. But I just cant get it to work when I try using javascript onclick to make it play. (the onclick works). Did you get it working with an onclick?

user531192 Over a year ago

Thanks so much. Looks like it was my bad javascript messing it up. Really appreciate the help.

Collectives™ on Stack Overflow

How to activate a CSS3 (webkit) animation using javascript?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related