Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

手机端不兼容keyframes、animation动画

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...