모바일 장치에서 CSS 애니메이션이 작동하지 않습니다.

Question

모바일 사이트의 사이드 바 탐색에 현재 작업 중이며 기본 메뉴 버튼에 아래 애니메이션을 포함하려고합니다.

iOS (Safari 및 Android - Android 브라우저)를 실행하는 휴대 기기를 제외한 다른 브라우저에서 잘 작동합니다. 내가 뭘 놓치고 있니? 감사.

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>

나는 완전히 일부 요소를 지원하지 않습니다 번역 어쩌면 생각하고

. 예를 들어, 태그 요소를 번역하려면 디스플레이 블록 :을 설정해야합니다.

그러나 div 요소에 대해 translate를 적용하려면 div 요소 표시에 CSS를 설정하면 인라인 블록이 표시되고 해당 번역이 계속 작동합니다.

표시하고자하는 요소를 설정하려고 시도하십시오. 블록.