做一个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);
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…