CSS-animation funktioniert nicht für mobile Geräte

Ich bin momentan auf der sidebar-navigation für eine mobile Website und ich bin versucht, umfassen die unten animation für das Hauptmenü.

Dies funktioniert gut auf verschiedenen Browsern außer für mobile Geräte mit iOS - Safari und Android - Android-Browser. Was bin ich? Danke.

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

InformationsquelleAutor LR. | 2014-09-17

2

Hallo, ich habe versucht, Ihr Geige und es funktionierte auf meinem Handy, das iphone5s.
Aber egal, soweit bin ich schon bekannt, wenn Sie wollen, verwenden von keyframes-übersetzen für ein element. Das element hat sein angezeigt block, oder es muss gewickelt werden, die von einem div, die standardmäßig angezeigt wird block zu.

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

@-webkit-keyframes move {
  0% { -webkit-transform: translate(20px); }
  100% { -webkit-transform: translate(500px); }
}
```
HTML:
```
<div class="wrapper"><a href="#">Test</a></div>
```
Ich bin denken vielleicht übersetzen nicht unterstützt einige Elemente vollständig. Zum Beispiel, wenn Sie übersetzen möchten ein tag element, setzen Sie das element display: block.

Jedoch, wenn Sie möchten, anwenden, übersetzen auf ein div-element, wenn Sie das css für die div-element display:inline-block, das übersetzen wird immer noch Arbeit auf, dass div.

Also vielleicht versuchen, die Elemente, die Sie verschieben möchten display:block.
- Können Sie bitte, helfen Sie mit mir... jsfiddle.net/v4vr807o. Sie funktionieren im desktop, sondern in mobile die rotate nicht für mich arbeiten. Es zeigt, wie ein flaches Quadrat.
InformationsquelleAutor Vuanjun

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.