我可以让animation-timing-function影响整个动画而不是动画的每一步吗？ [复制]答案

【问题标题】：Can I make the animation-timing-function affect the whole animation rather than each step of the animation? [duplicate]我可以让animation-timing-function影响整个动画而不是动画的每一步吗？ [复制]
【发布时间】：2018-11-27 09:04:33
【问题描述】：

我最近玩了很多 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% 之间应用缓出，那么这个会模仿缓入出功能。

有没有人建议我如何通过这两种方式之一来平滑动画？

【问题讨论】：

请注意，即使链接的问题是关于属性的-webkit 版本，也是同样的问题。正确答案是：不能用 CSS 完成。您需要通过自己进行数学运算来正确拆分计时函数（这对于复杂的三次贝塞尔计时函数几乎是不可能的），或者您可以查看 Javascript 库（即velocity.js）或Web Animations API（其中仍然有support limitations)。

标签： css css-animations

【解决方案1】：

一个想法是分割动画，而不是翻译你可以使用top/left然后你可以很容易地单独控制每个：

.box {
  width:60px;
  height:60px;
  background:red;
  position:relative;
  animation: bounce 2s infinite linear alternate,
              move 2s infinite ease-in  alternate;
}

@keyframes bounce{
    0%{
        transform:rotateZ(0deg);
    }
    50%{
        transform: rotateZ(30deg);
    }
    100%{
        transform:rotateZ(0deg);
    }
}
@keyframes move{
    0%{
        top:0px;
        left:0px;
    }
    50%{
        top:125px;
        left:30px;
    }
    100%{
        top:250px;
        left:60px;
    }
}

<div class="box">

</div>

【讨论】：

是的，分割动画是我能想到的唯一方法。
鉴于这是不可能的，我将其标记为最佳答案，因为它解决了我的问题。