css3动画怎样能从下往上慢慢升上去 代码怎么写
发布网友
发布时间：2022-04-22 08:14
共2个回答
热心网友
时间：2022-04-06 12:22
<!DOCTYPE html>
<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:500px;height:130px;bottom:50px;}
50% {background:red; left:500px; height:160px;bottom:50px;}
75% {background:red; left:500px;height:190px; bottom:50px;}
100% {background:red; left:500px; height:210px;bottom:50px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这只是个演示的demo，方法就是这样，animation-fill-mode: forwards;这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。
希望能够帮助到你，望采纳！
热心网友
时间：2022-04-06 13:40
这只是个演示的demo，方法就是这样，animation-fill-mode: forwards;这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。
