How to make a div executes its style animations with and if / else in JS

advertisements

Hello this is my current html code:

<div data-jibp="" data-jiis="uc" id="easter-egg" style="display:none;">
    <style>
    @keyframes roll {
        100%{transform:rotate(360deg)}}
        body{-webkit-animation-name:roll;
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:1;
    }
    </style>
</div>

I took it from googles easter egg, the barrel roll. I was wondering, how do I make this animation only appear when I input a certain name in a text box. Google has this set up so that when a user types in "Do a barrel roll" it executes these style animations. How do I make this execute in javascript using an if/else

Please help and thanks :)

EDIT:

(function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
})();

This is the function that runs the barrel roll, I tried calling upon it within my if/else statement but it doesnt seem to work. Any ideas? (Ps. Cassidy thanks for the suggestion but it's not quite what I mean)


Assuming you're using jQuery (looking at your tags in the question):

function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
}

$('input').on('change', function() {
  if (this.value === 'Do a barrel roll') {
    barrel();
  }
});

Take out the parenthesis surrounding your barrel() function, because that immediately invokes the function, and that's not what you want.