手机端不兼容keyframes、animation动画

Berly
  • 33

做一个web项目,需适配手机,在项目中做了一个鼠标移入,上滑详细内容的动画,在web浏览器都正常显示,但是在手机浏览器中展示时,动画不起作用,而且已经加过-webkit-

.page .list {
-webkit-animation: myMou 1s;
-moz-animation: myMou 1s;
-ms-animation: myMou 1s;
-o-animation: myMou 1s;
animation: myMou 1s;
animation-fill-mode: forwards;
}
.page .list_1 {
-webkit-animation: myMou1 0.5s;
-moz-animation: myMou1 0.5s;
-ms-animation: myMou1 0.5s;
-o-animation: myMou1 0.5s;
animation: myMou1 0.5s;
animation-fill-mode: forwards;
}
@-webkit-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
  }
}
@-o-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
  }
}
@-moz-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
  }
}
回复
阅读 1.7k
2 个回答

兼容列表 来看,这两个属性的兼容性都是没什么大问题的。

大概率是你触发这个动画(addClass) 之类操作没有被正确触发。

鼠标移入适配手机?所以手机上你是用的什么事件来代替鼠标事件?

宣传栏