<html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:absolute
animation:myfirst 5s
-webkit-animation:myfirst 5s
animation-fill-mode: forwards
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red left:500px bottom:50px}
25% {background:red left:500pxheight:130pxbottom:50px}
50% {background:red left:500px height:160pxbottom:50px}
75% {background:red left:500pxheight:190px bottom:50px}
100% {background:red left:500px height:210pxbottom:50px}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这只是个演示的demo,方法就是这样,animation-fill-mode: forwards这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。其他代码都比较简单,不懂随时问我。
希望能够帮助到你,望采纳!
你好,这个问题应该是css兼容性问题导致的。
目前绝大部分移动浏览器还不支持animation这个属性,而是支持-webkit-animation(这类加前缀的)属性,在问题中:
.ih { background: #000 opacity:.3width: 90% height: 25% margin-left:-45% position: absolutebottom: 120pxleft:50%animation:ih 2s
}
只设置了,animation: ih 2s而没有写兼容的 -webkit-animation: ih 2s所以动画在移动浏览器中就不动了。你可以试下将上面代码改为:
.ih { background: #000 opacity:.3width: 90% height: 25% margin-left:-45% position: absolutebottom: 120pxleft:50%-webkit-animation:ih 2s
-moz-animation:ih 2s
-ms-animation:ih 2s
-o-animation:ih 2s
animation:ih 2s
}
希望能帮你解决问题,望采纳~~