如何解决CSS 组合动画 - 第二个动画不符合预期
我正在尝试向单个对象添加多个 CSS 关键帧动画。我有一个火箭的图像,我想在屏幕上向右移动,然后向上旋转到右侧。第一部分,向右移动,工作正常。第二部分,旋转,似乎在起作用,但它不是原地旋转,而是在向左移动的同时旋转。
这是目前的样子:
https://codeeverydamnday.com/projects/rocketblaster/index2.html
相关 HTML:
<img id="rocketfire" src="images/rocketfireright.svg" />
相关 CSS:
#rocketfire {
position: absolute;
top: 200px;
left: -320px;
height: 200px;
animation:
launch 4s ease-in-out 0.5s 1 forwards,rightself 2s ease-in-out 4.5s 1 forwards;
}
@keyframes launch {
0% {transform: translateX(-320px);}
100% {transform: translateX(1050px);}
}
@keyframes rightself {
100% {transform: rotate(-90deg);}
}
我看过的每个教程都说了同样的话——只是用逗号分隔动画并添加您想要的属性,确保添加延迟,以便第二个动画在第一个动画之后才开始。使用“forwards”使对象保持动画结束状态。
我已经完成了所有这些,但无法弄清楚为什么旋转动画也会将对象移回左侧而不是原地旋转。我错过了什么吗?
解决方法
如果您将动画 rightself
更改为这样,它会起作用:
@keyframes rightself {
100% {
transform: translateX(1050px) rotate(-90deg);
}
}
我认为动画无法保持状态,但我不知道为什么。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。