gpt4 book ai didi

css - 我可以让动画计时功能影响整个动画而不是动画的每个步骤吗?

转载 作者:行者123 更新时间:2023-11-28 10:09:44 25 4
gpt4 key购买 nike

<分区>

我最近一直在玩 CSS 动画。我在 CSS 动画方面遇到的最大问题是动画计时功能。我的问题是该功能应用于关键帧的每个部分之间。我的意思是,如果我有一个作用于 div 的多步动画:

@keyframes moveProjectTop{
0%{
transform: translateX(0px) translateY(0px) rotateZ(0deg);
}
50%{
transform: translateX(125px) translateY(30px) rotateZ(30deg);
}
100%{
transform: translateX(250px) translateY(60px) rotateZ(0deg);
}
}

我希望这种变换的平移运动具有弹跳效果,但我不希望旋转运动具有弹跳效果。我不认为这是可能的 CSS。

我之所以相信这一点,是因为:

1:变换不能拆分为两个动画,这意味着所有变换都必须在 1 个关键帧动画下。

2: 动画计时函数在每个步骤之间应用。

我认为解决方案与我的第二个细节有关。有没有办法让计时功能应用于整个动画而不是在每个步骤之间(两个百分比之间)。另一个解决方案是,如果有一种方法可以在每个步骤之间应用不同的计时函数,就像我可以在 0%-50% 之间应用缓入和在 50%-100% 之间应用缓出一样,那么这个将模仿缓入缓出功能。

有没有人建议我如何使用这两种方式中的一种来平滑动画?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com