title: How to make a div execute its style animations with and if/else in JS
body: <p>Hello this is my current html code:</p>
  
  <pre><code>&lt;div data-jibp="" data-jiis="uc" id="easter-egg" style="display:none;"&gt;
      &lt;style&gt;
      @keyframes roll {
          100%{transform:rotate(360deg)}}
          body{-webkit-animation-name:roll;
          -webkit-animation-duration:4s;
          -webkit-animation-iteration-count:1;
      }
      &lt;/style&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>Please help and thanks :)</p>
  
  <p>EDIT:</p>
  
  <pre><code>(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;
  })();
  </code></pre>
  
  <p>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)</p>