HTML5 CSS3 Javascript
HTML5 CSS3 Javascript
提问于 2018-08-01 22:56:33
我刚开始学习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>回答 1
Stack Overflow用户
发布于 2018-08-01 23:05:27
您的动画完成并跳到初始位置，将此添加到动画-持续时间下面。它告诉动画在最后一帧停止
animation-fill-mode: forwards;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51636495
复制相关文章
相似问题