Triggering a basic CSS animation with Javascript

Question

I'm currently trying to add a Konami Code which would spin a div on one of my (very simple) pages.

Here's my code:

<html>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>     
<html>
<script>
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
n = 0;  
$(document).keydown(function (e) {  
    if (e.keyCode === k[n++]) {  
        if (n === k.length) {  
            alert('Konami working');
            return !1  
        }  
    } else k = 0  
});
</script>
<style>
#div1
{
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<div id="div1"><iframe frameborder="0" width="100%" height="100%" align="middle" src="//www.youtube.com/embed/_RJHLB3cBXU?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&iv_load_policy=3&playlist=_RJHLB3cBXU"></iframe></div>
</html>

As you can see, it's just about triggering the animation specified in the messy CSS soup (which works perfectly), when the correct code is entered. I'm a bit desperate about it, would somebody have a idea ?

Have the script (after successful code sequence) add a class to the div in which the animation is defined. Something like #div1.animate. And in the js, just have the success apply the class, like ('#div1').addClass('animate'); — kunalbhat
– kunalbhat, Commented Oct 8, 2014 at 18:25
Can you be more specific about what isn't working? Does the alert('Konami working'); line work? — pquest
– pquest, Commented Oct 8, 2014 at 18:26
Yeah, my Konami stuff is working, no problem with that. I just want to replace that line with the trigger for the rotation. — Komic
– Komic, Commented Oct 8, 2014 at 18:28

Bradley · Accepted Answer · 2014-10-08 18:25:52Z

I think I get what your going for here, just try adding a class that contains the animations when the event occurs. I'm not 100% sure the below will work as I'm not very familiar with keyframes, but the concept should hold true and allow you to get to the answer.

$(document).keydown(function (e) {  
    if (e.keyCode === k[n++]) {  
        if (n === k.length) {  
            alert('Konami working');
            $('#div1').addClass('spinIt'); // <- Add this
            return !1  
        }  
    } else k = 0  
});

CSS:

<style>
    #div1
    {
        position: absolute; 
        top: 0%; 
        left: 0%; 
        width: 100%; 
        height: 100%;

    }
    // Add this class with the animation css and remove it from the above div1.
    .spinIt{
       -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }


</style>

Oh, yeah, it might work, I'll try that as soon as possible. I already tried with addClass, but I probably messed up with my CSS. Thanks !
IT'S ALIVE ! Thanks a lot, yeah, I DID messed up with my CSS when I tried for the first time.

Collectives™ on Stack Overflow

Triggering a basic CSS animation with Javascript

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related