title: keyframes only working with codepen.io does not work on brackets.io live preview or jsfiddle.net
body: <p>Here is all my code... I have two divs that will be moved in opposite directions and exit the screen to redirect to another page. The problem is that the div with id="hat" completes the animation and the div with id="sock" does not move at all. I have tested it in browsers, my IDE live preview. Both did not work.</p>
  
  <p>HTML: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: white;
  }
  
  .box {
    /*   TITLES OF CHOICES    */
    position: relative;
    background-color: gainsboro;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    display: inline-block;
    margin: 10%;
    transition: all 1s;
  }
  
  #hat {
    background-image: url(hat.jpg);
    background-position: center;
  }
  
  #sock {
    background-image: url(sock.jpeg);
    background-position: center;
  }
  
  div.box:hover {
    /*   CHANGE COLOR WHEN MOUSE HOVER  */
    opacity: 0.5;
  }
  
  */
  /* left exit */
  
  @-webkit-keyframes pageExitLeft {
    from {
      left: 40px;
      opacity: 1;
    }
    to {
      left: -440px;
      opacity: 0;
    }
  }
  
  @-moz-keyframes pageExitLeft {
    from {
      left: 40px;
      opacity: 1;
    }
    to {
      left: -440px;
      opacity: 0;
    }
  }
  
  @-o-keyframes pageExitLeft {
    from {
      left: 40px;
      opacity: 1;
    }
    to {
      left: -440px;
      opacity: 0;
    }
  }
  
  @keyframes pageExitLeft {
    from {
      left: 40px;
      opacity: 1;
    }
    to {
      left: -440px;
      opacity: 0;
    }
  }
  
  
  /* right exit */
  
  @-webkit-keyframes pageExitRight {
    from {
      right: 40px;
      opacity: 1;
    }
    to {
      right: -440px;
      opacity: 0;
    }
  }
  
  @-moz-keyframes pageExitRight {
    from {
      right: 40px;
      opacity: 1;
    }
    to {
      right: -440px;
      opacity: 0;
    }
  }
  
  @-o-keyframes pageExitRight {
    from {
      right: 40px;
      opacity: 1;
    }
    to {
      right: -440px;
      opacity: 0;
    }
  }
  
  @keyframes pageExitRight {
    from {
      right: 40px;
      opacity: 1;
    }
    to {
      right: -440px;
      opacity: 0;
    }
  }
  
  
  /*  ANIMATION SETTING   */
  
  #hat {
    -webkit-animation: pageExitLeft 2s 1 forwards ease-out;
    -moz-animation: pageExitLeft 2s 1 forwards ease-out;
    -o-animation: pageExitLeft 2s 1 forwards ease-out;
    animation: pageExitLeft 2s 1 forwards ease-out;
  }
  
  #sock {
    -webkit-animation: pageExitRight 2s 1 forwards ease-out;
    -moz-animation: pageExitRight 2s 1 forwards ease-out;
    -o-animation: pageExitRight 2s 1 forwards ease-out;
    animation: pageExitRight 2s 1 forwards ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box" id="hat"&gt;hat&lt;/div&gt;
  &lt;div class="box" id="sock"&gt;sock&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The editor I use is Brackets. I have been trying to find a solution to the transition I am trying to do but couldn't find anything.I have tried to make the animations work and apparently the only place it works is in the website codepen.io I also tried to use it on jsfiddle.net still no difference. </p>