title: CSS animation not working for mobile devices
body: <p>I am currently working on sidebar navigation for a mobile site and I am trying to include the below animation for the main menu button. </p>
  
  <p>This works well on different browsers except for mobile devices running iOS - Safari and Android - Android Browser. What am I missing? Thanks.</p>
  
  <p><a href="http://jsfiddle.net/wvck5xnL/" rel="nofollow">http://jsfiddle.net/wvck5xnL/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="mainBtn"&gt;
    &lt;input id="mainmenuBtn" name="exit" type="checkbox" /&gt;
    &lt;label for="mainmenuBtn"&gt;&lt;span class="burger"&gt;&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      padding:0;
      margin:0;
      overflow: hidden;
     background:white;
  }
  
  /* burger icon animation  */
  .mainBtn{
    display: block;
    width: 40px;
    padding-left: 10px;
    text-align: left;
  }
  
  .mainBtn input {
    display: none;
  }
  
  .mainBtn label {
    position: relative;
    width: 48px;
    height: 57px;
    display: block;
    cursor: pointer;
    background: transparent;
  }
  
  /* Exit Icon */
  
  .mainBtn label:before,
  .mainBtn input:checked + label:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: black;
  }
  
  .mainBtn label:before {
    -webkit-animation: animationOneReverse 1s ease forwards;
    -moz-animation: animationOneReverse 1s ease forwards;
    -o-animation: animationOneReverse 1s ease forwards;
    -ms-animation: animationOneReverse 1s ease forwards;
    animation: animationOneReverse 1s ease forwards;
  }
  
  @-webkit-keyframes animationOneReverse {
    0% { -webkit-transform: rotate(315deg); }
    50%, 100% { -webkit-transform: rotate(0deg); }
  }
  @-moz-keyframes animationOneReverse {
    0% { -moz-transform: rotate(315deg); }
    50%, 100% { -moz-transform: rotate(0deg); }
  }
  @-o-keyframes animationOneReverse {
    0% { -o-transform: rotate(315deg); }
    50%, 100% { -o-transform: rotate(0deg); }
  }
  @-ms-keyframes animationOneReverse {
    0% { -ms-transform: rotate(315deg); }
    50%, 100% { -ms-transform: rotate(0deg); }
  }
  @keyframes animationOneReverse {
    0% { transform: rotate(315deg); }
    50%, 100% { transform: rotate(0deg); }
  }
  
  .mainBtn input:checked + label:before {
    -webkit-animation: animationOne 1s ease forwards;
    -moz-animation: animationOne 1s ease forwards;
    -o-animation: animationOne 1s ease forwards;
    -ms-animation: animationOne 1s ease forwards;
    animation: animationOne 1s ease forwards;
  }
  
  @-webkit-keyframes animationOne {
    0%, 50% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(315deg); }
  }
  @-moz-keyframes animationOne {
    0% { -moz-transform: rotate(0deg); }
    50%, 100% { -moz-transform: rotate(315deg); }
  }
  @-o-keyframes animationOne {
    0% { -o-transform: rotate(0deg); }
    50%, 100% { -o-transform: rotate(315deg); }
  }
  @-ms-keyframes animationOne {
    0% { -ms-transform: rotate(0deg); }
    50%, 100% { -ms-transform: rotate(315deg); }
  }
  @keyframes animationOne {
    0%, 50% { transform: rotate(0deg); }
    100% { transform: rotate(315deg); }
  }
  
  .mainBtn label:after,
  .mainBtn input:checked + label:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: black;
  }
  
  .mainBtn label:after {
    -webkit-animation: animationTwoReverse 1s ease forwards;
    -moz-animation: animationTwoReverse 1s ease forwards;
    -o-animation: animationTwoReverse 1s ease forwards;
    -ms-animation: animationTwoReverse 1s ease forwards;
    animation: animationTwoReverse 1s ease forwards;
  }
  
  @-webkit-keyframes animationTwoReverse {
    0% { -webkit-transform: rotate(405deg); }
    50%, 100% { -webkit-transform: rotate(0deg); }
  }
  @-moz-keyframes animationTwoReverse {
    0% { -moz-transform: rotate(405deg); }
    50%, 100% { -moz-transform: rotate(0deg); }
  }
  @-o-keyframes animationTwoReverse {
    0% { -o-transform: rotate(405deg); }
    50%, 100% { -o-transform: rotate(0deg); }
  }
  @-ms-keyframes animationTwoReverse {
    0% { -ms-transform: rotate(405deg); }
    50%, 100% { -ms-transform: rotate(0deg); }
  }
  @keyframes animationTwoReverse {
    0% { transform: rotate(405deg); }
    50%, 100% { transform: rotate(0deg); }
  }
  
  .mainBtn input:checked + label:after {
    -webkit-animation: animationTwo 1s ease forwards;
    -moz-animation: animationTwo 1s ease forwards;
    -o-animation: animationTwo 1s ease forwards;
    -ms-animation: animationTwo 1s ease forwards;
    animation: animationTwo 1s ease forwards;
  }
  
  @-webkit-keyframes animationTwo {
    0%, 50% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(405deg); }
  }
  @-moz-keyframes animationTwo {
    0% { -moz-transform: rotate(0deg); }
    50%, 100% { -moz-transform: rotate(405deg); }
  }
  @-o-keyframes animationTwo {
    0% { -o-transform: rotate(0deg); }
    50%, 100% { -o-transform: rotate(405deg); }
  }
  @-ms-keyframes animationTwo {
    0% { -ms-transform: rotate(0deg); }
    50%, 100% { -ms-transform: rotate(405deg); }
  }
  @keyframes animationTwo {
    0%, 50% { transform: rotate(0deg); }
    100% { transform: rotate(405deg); }
  }
  
  /* Burger Icon */
  
  .mainBtn label .burger:before {
    content: '';
    position: absolute;
    top: 17px;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: black;
    -webkit-animation: animationBurgerTopReverse 1s ease forwards;
    -moz-animation: animationBurgerTopReverse 1s ease forwards;
    -o-animation: animationBurgerTopReverse 1s ease forwards;
    -ms-animation: animationBurgerTopReverse 1s ease forwards;
    animation: animationBurgerTopReverse 1s ease forwards;
  }
  
  @-webkit-keyframes animationBurgerTopReverse {
    0%, 50% { -webkit-transform: translateY(12px); opacity: 0; }
    51% { -webkit-transform: translateY(12px); opacity: 1; }
    100% { -webkit-transform: translateY(0px); opacity: 1; }
  }
  @-moz-keyframes animationBurgerTopReverse {
    0%, 50% { -moz-transform: translateY(12px); opacity: 0; }
    51% { -moz-transform: translateY(12px); opacity: 1; }
    100% { -moz-transform: translateY(0px); opacity: 1; }
  }
  @-o-keyframes animationBurgerTopReverse {
    0%, 50% { -o-transform: translateY(12px); opacity: 0; }
    51% { -o-transform: translateY(12px); opacity: 1; }
    100% { -o-transform: translateY(0px); opacity: 1; }
  }
  @-ms-keyframes animationBurgerTopReverse {
    0%, 50% { -ms-transform: translateY(12px); opacity: 0; }
    51% { -ms-transform: translateY(12px); opacity: 1; }
    100% { -ms-transform: translateY(0px); opacity: 1; }
  }
  @keyframes animationBurgerTopReverse {
    0%, 50% { transform: translateY(12px); opacity: 0; }
    51% { transform: translateY(12px); opacity: 1; }
    100% { transform: translateY(0px); opacity: 1; }
  }
  
  .mainBtn input:checked + label .burger:before {
    -webkit-animation: animationBurgerTop 1s ease forwards;
    -moz-animation: animationBurgerTop 1s ease forwards;
    -o-animation: animationBurgerTop 1s ease forwards;
    -ms-animation: animationBurgerTop 1s ease forwards;
    animation: animationBurgerTop 1s ease forwards;
  }
  
  @-webkit-keyframes animationBurgerTop {
    0% { -webkit-transform: translateY(0px); opacity: 1; }
    50% { -webkit-transform: translateY(12px); opacity: 1; }
    51%, 100% { -webkit-transform: translateY(12px); opacity: 0; }
  }
  @-moz-keyframes animationBurgerTop {
    0% { -moz-transform: translateY(0px); opacity: 1; }
    50% { -moz-transform: translateY(12px); opacity: 1; }
    51%, 100% { -moz-transform: translateY(12px); opacity: 0; }
  }
  @-o-keyframes animationBurgerTop {
    0% { -o-transform: translateY(0px); opacity: 1; }
    50% { -o-transform: translateY(12px); opacity: 1; }
    51%, 100% { -o-transform: translateY(12px); opacity: 0; }
  }
  @-ms-keyframes animationBurgerTop {
    0% { -ms-transform: translateY(0px); opacity: 1; }
    50% { -ms-transform: translateY(12px); opacity: 1; }
    51%, 100% { -ms-transform: translateY(12px); opacity: 0; }
  }
  @keyframes animationBurgerTop {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(12px); opacity: 1; }
    51%, 100% { transform: translateY(12px); opacity: 0; }
  }
  
  .mainBtn label .burger:after {
    content: '';
    position: absolute;
    bottom: 16px;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: black;
    -webkit-animation: animationBurgerBottomReverse 1s ease forwards;
    -moz-animation: animationBurgerBottomReverse 1s ease forwards;
    -o-animation: animationBurgerBottomReverse 1s ease forwards;
    -ms-animation: animationBurgerBottomReverse 1s ease forwards;
    animation: animationBurgerBottomReverse 1s ease forwards;
  }
  
  @-webkit-keyframes animationBurgerBottomReverse {
    0%, 50% { -webkit-transform: translateY(-12px); opacity: 0; }
    51% { -webkit-transform: translateY(-12px); opacity: 1; }
    100% { -webkit-transform: translateY(0px); opacity: 1; }
  }
  @-moz-keyframes animationBurgerBottomReverse {
    0%, 50% { -moz-transform: translateY(-12px); opacity: 0; }
    51% { -moz-transform: translateY(-12px); opacity: 1; }
    100% { -moz-transform: translateY(0px); opacity: 1; }
  }
  @-o-keyframes animationBurgerBottomReverse {
    0%, 50% { -o-transform: translateY(-12px); opacity: 0; }
    51% { -o-transform: translateY(-12px); opacity: 1; }
    100% { -o-transform: translateY(0px); opacity: 1; }
  }
  @-ms-keyframes animationBurgerBottomReverse {
    0%, 50% { -ms-transform: translateY(-12px); opacity: 0; }
    51% { -ms-transform: translateY(-12px); opacity: 1; }
    100% { -ms-transform: translateY(0px); opacity: 1; }
  }
  @keyframes animationBurgerBottomReverse {
    0%, 50% { transform: translateY(-12px); opacity: 0; }
    51% { transform: translateY(-12px); opacity: 1; }
    100% { transform: translateY(0px); opacity: 1; }
  }
  
  .mainBtn input:checked + label .burger:after {
    -webkit-animation: animationBurgerBottom 1s ease forwards;
    -moz-animation: animationBurgerBottom 1s ease forwards;
    -o-animation: animationBurgerBottom 1s ease forwards;
    -ms-animation: animationBurgerBottom 1s ease forwards;
    animation: animationBurgerBottom 1s ease forwards;
  }
  
  @-webkit-keyframes animationBurgerBottom {
    0% { -webkit-transform: translateY(0px); opacity: 1; }
    50% { -webkit-transform: translateY(-12px); opacity: 1; }
    51%, 100% { -webkit-transform: translateY(-12px); opacity: 0; }
  }
  @-moz-keyframes animationBurgerBottom {
    0% { -moz-transform: translateY(0px); opacity: 1; }
    50% { -moz-transform: translateY(-12px); opacity: 1; }
    51%, 100% { -moz-transform: translateY(-12px); opacity: 0; }
  }
  @-o-keyframes animationBurgerBottom {
    0% { -o-transform: translateY(0px); opacity: 1; }
    50% { -o-transform: translateY(-12px); opacity: 1; }
    51%, 100% { -o-transform: translateY(-12px); opacity: 0; }
  }
  @-ms-keyframes animationBurgerBottom {
    0% { -ms-transform: translateY(0px); opacity: 1; }
    50% { -ms-transform: translateY(-12px); opacity: 1; }
    51%, 100% { -ms-transform: translateY(-12px); opacity: 0; }
  }
  @keyframes animationBurgerBottom {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(-12px); opacity: 1; }
    51%, 100% { transform: translateY(-12px); opacity: 0; }
  }
  </code></pre>