手机端不兼容keyframes、animation动画

Question

做一个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);
  }
}

Answer 1

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

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