我刚开始学习HTML5和CSS3,我正试着在一个盒子里画一个小圆圈。动画起作用了,但它正在移回其初始位置。我要把圆圈放到动画位置。
<head>
<style type="text/css">
#green{
width:600px; height:600px; background-color:green;
}
.yellow{
width:100px; height:100px; border-radius:50%;
background-color:yellow; position:relative; top:10%; left:10%;
animation-name:move;
animation-duration:1s;
}
@keyframes move{
from{transform:translateY(0)}
to{transform:translateY(-50px)}
}
</style>
</head>
<body>
<div id="green">
<div class="yellow"></div>
</div>
</body>
发布于 2018-08-01 23:05:27
您的动画完成并跳到初始位置,将此添加到动画-持续时间下面。它告诉动画在最后一帧停止
animation-fill-mode: forwards;
https://stackoverflow.com/questions/51636495
复制相似问题