CSS-анимация не работает для мобильных устройств

Question

В настоящее время я работаю над навигацией по боковой панели для мобильного сайта, и я пытаюсь включить анимацию ниже для кнопки главного меню.

Это хорошо работает в разных браузерах, за исключением мобильных устройств под управлением iOS - Safari и Android - Android Browser. Что мне не хватает? Благодарю.

http://jsfiddle.net/wvck5xnL/

HTML

<div class="mainBtn"> 
    <input id="mainmenuBtn" name="exit" type="checkbox" /> 
    <label for="mainmenuBtn"><span class="burger"></span></label> 
</div> 

CSS

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; } 
} 

Answer 1

Привет Я попробовал ваш скрипку, и она работала на моем мобильном телефоне, который iphone5s. Но так или иначе, насколько я знаю, когда вы хотите использовать ключевые кадры - переводить для элемента. Элемент должен быть отображаемый блок, или он должен быть обернут div, который по умолчанию также отображается в блоке.

a { 
 
    background:orange; 
 
} 
 
div { 
 
    -webkit-animation: move 5s infinite; 
 
} 
 

 
@-webkit-keyframes move { 
 
    0% { -webkit-transform: translate(20px); } 
 
    100% { -webkit-transform: translate(500px); } 
 
}

<div class="wrapper"><a href="#">Test</a></div>

Я думаю, может переводить не поддерживает некоторые элементы полностью. Например, если вы хотите перевести тег элемент, вы должны установить элемент display: block.

Однако, если вы хотите применить перевод на элементе div, если вы установите css на элемент div : встроенный блок, перевод будет по-прежнему работать над этим div.

Возможно, попробуйте установить элементы, которые вы хотите переместить. дисплей: блок.