我正在尝试制作一个从右下角移动的球->顶部中心->左下方(/(。然而，我的动画从右上角移动->底部中心->左上角(/(。
#stage {
height:300px;
border:1px solid #000;
}
#ball {
position:relative;
width:50px;
height:50px;
border-radius:50%;
background-color:red;
animation:ball-move 2s infinite reverse linear 2s,
color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
/* your keyframe styles go here */
0% {
top:50px;
left:50px;
}
50% {
top:calc(100% - 50px);
left:calc(50% - 25px);
}
100% {
top:0;
left:calc(100% - 50px);
}
}<div id="stage">
<div id="ball"></div>
</div>您需要调整关键帧。"；顶部"；那些只是需要改变。
#stage {
height: 300px;
border: 1px solid #000;
}
#ball {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
animation: ball-move 2s infinite reverse linear 2s,
color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
/* your keyframe styles go here */
0% {
top: calc(100% - 50px);
left: 50px;
}
50% {
top: 0px;
left: calc(50% - 25px);
}
100% {
top: calc(100% - 50px);
left: calc(100% - 50px);
}
}<div id="stage">
<div id="ball"></div>
</div>#container{
box-sizing: border-box;
width: 400px;
height: 190px;
margin: 0 auto;
border: 1px solid gray;
background: #fefefe;
}
.ball{
width: 50px;
height: 50px;
background: tomato;
border: 1px solid crimson;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite cubic-bezier(.5,.5,.5,.5) alternate;
}
@keyframes bounce{
0%{
top: calc(100% - 50px);
left: calc(100% - 50px);
}
50%{
left: calc(50% - 50px);
top: 0;
}
100%{
top: calc(100% - 50px);
left: 0;
}
}<body>
<div id="container">
<div class="ball"></div>
</div>
</body>我希望这个代码能帮助你解决你的问题。