先把代码扔下边。没什么奇怪的东西。当手指去滑动页面的时候,动画会停止。这是为什么?有什么解决办法?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes ani{
0%{top:0;transform: translate(0px);}
10%{transform: translate(30px);}
20%{transform: translate(0px);}
30%{transform: translate(30px);}
40%{transform: translate(0px);}
50%{transform: translate(30px);}
60%{transform: translate(0px);}
70%{transform: translate(30px);}
80%{transform: translate(0px);}
90%{transform: translate(30px);}
100%{ top:100%; transform: translate(0px); }
}
.animate{
top:0;
animation:ani 10s ease-out;
animation-fill-mode:both;
}
div{width:100px;height:100px;border-radius:50%;position: fixed;top:0;left:300px;background-color: #00cced}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>
LEATH
相关分类