CSS 动画 : different cubic-bezier

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，

cubic-bezier(n,n,n,n): Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 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;}
}