CSS3动画在平板电脑/手机中的怪异运动

我已经为我正在开发的Demoproject构建了一些CSS动画和关键帧。我只是使用fadeIn，fadeOut，slideInLeft和slideOutLeft，并且它们在桌面模式下都按预期工作。CSS3动画在平板电脑/手机中的怪异运动

但是，当我回到平板电脑/手机版本时，slideInLeft动画在动画结束时会得到意想不到的移动。像缩放效果。我一直在用这个拉我的头发一段时间。预期的移动是从右到左的直线水平线。

我的演示项目位于this address。这是在你点击第一个按钮之后，第二个页面滑过那个bug。如果刷新页面，动画将按预期行事。

编辑

我的动画：

@keyframes slideInLeft { 
    0% { left: 130%; } 

    100% { left: 30%; } 
} 

@-webkit-keyframes slideInLeft { 
    0% { left: 130%; } 

    100% { left: 30%; } 
} 



@media (min-width: 768px) { 
    @keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 0; } 
    } 

    @-webkit-keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 0; } 
    } 
} 

@media (min-width: 992px) { 
    @keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 10%; } 
    } 

    @-webkit-keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 10%; } 
    } 
} 

@media (min-width: 1200px) { 
    @keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 30%; } 
    } 

    @-webkit-keyframes slideInLeft { 
     0% { left: 130%; } 

     100% { left: 30%; } 
    } 
} 

.slideInLeft { 
    position: absolute !important; 
    -webkit-animation: slideInLeft 2s; 
    -moz-animation: slideInLeft 2s; 
    -ms-animation: slideInLeft 2s; 
    -o-animation: slideInLeft 2s; 
    animation: slideInLeft 2s; 
}

动画元素

.container { 
position: absolute; 
top: 100%; 
left: 30%; 
/*transform: translateX(-100%);*/ 
-webkit-transform: translateY(-60%); 
-moz-transform: translateY(-60%); 
-ms-transform: translateY(-60%); 
-o-transform: translateY(-60%); 
transform: translateY(-60%); 
width: 40%; 
display: block; 
text-align: center; 
margin: 0 auto; 
}

HTML结构

<div id="container" class="container slideInLeft"> 
    <div> 
     <h1> 
      Deactivation 
     </h1> 
    </div> 
    <div> 
     <p> 
      Enter your activated phone number in international format (e.g. +467) 
     </p> 
    </div> 
    <div class="input-container"> 
     <input type="text" id="msisdn" /> 
    </div> 
    <div id="loader" class="la-ball-scale-ripple-multiple la-2x spinner"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="dots has-input"> 
     <ul id="bullet-list"> 
      <li class="blank"></li> 
      <li class="selected"></li> 
      <li class="blank"></li> 
      <li class="blank"></li> 
     </ul> 
    </div> 
    <div class="button-container"> 
     <a href="#" class="button inactive" id="send-button">DEACTIVATE NUMBER</a> 
    </div> 

</div>

任何帮助表示赞赏！

来源

2015-12-30 Martin Johansson

是的，如果你可以发布你的代码的相关部分将是有帮助的。谢谢。 – redditor

似乎使容器无论在常规CSS和动画类“相对” wolud为你做的工作:)

祝你好运！

来源

2015-12-30 13:01:38 Nedyt

是的！这工作！谢谢！ :) –

CSS3动画在平板电脑/手机中的怪异运动

回答

相关问题