堆棧內存溢出
  簡體   English   中英

CSS動畫不適用於移動設備

[英]CSS animation not working for mobile devices

 原文  2014-09-17 15:00:05  0   1    css/ animation/ mobile/ browser/ sidebar

問題描述

我目前正在為移動網站進行側邊欄導航，並且嘗試在主菜單按鈕中加入以下動畫。

除運行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; }
}

1 個解決方案

解決方案1
 2 已采納  2014-10-14 03:26:05

嗨，我嘗試過您的小提琴，它可以在我的手機iphone5s上使用。 但是，據我所知，無論如何，當您想要對元素使用keyframes-translate時。 元素必須顯示為block ，或者必須由div包裝，默認情況下也顯示為block。 

 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元素上應用翻譯時，如果在div元素display：inline-block上設置css，則該翻譯仍適用於該div。

因此，也許嘗試設置要移動的元素display：block 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS動畫無法在移動設備上運行 移動設備中的純 CSS 加載器動畫 css動畫和jquery .load（）在移動設備上口吃 CSS animation 在桌面上工作，但不是在移動設備上工作？ CSS animation 不適用於 Z1BDF605991920DB11ZCBDF8508204CEB4 中的 SVG 圖像 Css 鏈接焦點在移動設備中不起作用 css 在移動設備上無法正常工作（小米瀏覽器） CSS：懸停、焦點或活動不適用於移動設備 CSS 屬性在某些移動設備上不起作用 CSS3背景位置動畫在移動設備上滯后
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM