CSS动画不适用于移动设备 [英] CSS animation not working for mobile devices
本文介绍了CSS动画不适用于移动设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在为移动网站进行侧边栏导航，并且尝试在主菜单按钮中加入以下动画.
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.
除了运行iOS的移动设备-Safari和Android-Android浏览器之外，这在其他浏览器上均能很好地运行.我想念什么?谢谢.
This works well on different browsers except for mobile devices running iOS - Safari and Android - Android Browser. What am I missing? Thanks.
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; }
}
推荐答案
您好，我尝试了您的小提琴，它可以在我的手机(iphone5s)上使用.但是无论如何，据我所知，当您想对某个元素使用keyframes-translate时.元素必须为显示块，或者必须由div包裹，默认情况下也将其显示为块.
Hi I tried your fiddle and it worked on my mobile, which is iphone5s. But anyway, as far as I've known, when you want to use keyframes-translate for an element. The element has to be displayed block, or it has to be wrapped by a div, which default is displayed block too.
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 .
I'm thinking maybe translate doesn't support some elements completely. For instance, when you want to translate a tag element, you have to set the element display: block.
但是，当您要在div元素上应用翻译时，如果在div元素 display:inline-block 上设置css，则该翻译仍将在该div上起作用.
However, when you want to apply translate on a div element, if you set the css on the div element display:inline-block, the translate will still work on that div.
所以也许尝试设置要移动的元素 display:block .
So maybe try to set the elements that you'd like to move display:block.
这篇关于CSS动画不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
