项目描述:我正在寻求将两个动画应用于div内的嵌套图像,而实际上div有责任上下移动图像,因为图像被吸引在其中和嵌套在div内的图像(img(,负责连续旋转,同时div上下跳动图像。
我想要什么:
1.div内的图像应保持 360度旋转
2.当1发生时,div应保持弹跳或上下移动
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: forwards;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
问题: 弹跳过程很棒,但我不知道如何在图像弹跳时使其旋转
谢谢。
Codepen链接
帖子经过编辑,应用答案后没有问题
动画迭代次数在img旋转时应该是无限的,以匹配它反弹的次数,否则动画将运行一次,并在长方体仍在反弹时停止。此外,如果您有拼写错误,to {transform: rotate(360deg;)}
中的分号应该在to {transform: rotate(360deg);}
之外。这就是为什么它不起作用。
此外,animation-direction:forwards
无效,正确的值为animation-direction:normal
。
经过这些更正后,代码为:
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: normal;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>