CSS动画：不同的立方贝塞尔

Question

我有一个简单的动画，当它到达终点时我想“超调”。然后它应该反转并在另一端“过冲”。

代码看起来像这样：

h1 {
    animation-name: test 3000ms infinite alternate;
    animation-timing-function: cubic-bezier(0.300, -0.530, 0.765, 1.530);
}
@keyframes test {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(100px,0);
    }
}

问题是动画在每次迭代开始时也会“低于”。

如何仅在一个方向上应用animation-timing-function？在另一个方向上应用另一个方向？

由于

Answer 1

cubic-bezier的值范围是0-1，

  

<强>立方贝塞尔（N，N，N，N）：   在cubic-bezier函数中定义自己的值可能的值   是0到1之间的数值

如何以无限的百分比设置您的需求，

您可以通过为各自的百分比指定值来控制其速度。

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
}

@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 0px;}
}

@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 0px;}
}

Answer 2

当您设置不同的关键帧时，计时功能适用于关键帧和关键帧之间的每个移动。

因此，将中间点设置为50％将获得效果

h1 {
    display: inline-block;
}

h1:hover {
    animation: test 3000ms;
    animation-timing-function: cubic-bezier(0.15, 0.32, 0.55, 1.35);
}


@keyframes test {
      0% { transform: translate(  0px,0);}
     50% { transform: translate(100px,0);}
    100% { transform: translate(  0px,0);}
}

<h1>TEST</h1>

此外，如果您以可触发的方式设置动画（例如，在悬停中，就像我所做的那样），那么您可以使用Chrome开发工具进行检查。