如何使用CSS \cubic-bezier实现正弦函数？

Question

我将用正弦函数实现CSS宽度动画，如下所示：

​

​

但是使用cubic-bezier，我只能像transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275);一样设置四个参数。

它的定位是使用CSS动画来实现这一点吗？或者如何在JS中做到这一点？

Answer 1

您可以使用cubic-bezier()模拟正弦函数

看看这个正弦近似的参考资料：Sine approximation using cubic Bézier curves

使用4个关键帧和带值的cubic-bezier()：

cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)

将用正弦函数轨迹移动一个物体。

我为你的案子做了一个演示。纯CSS解决方案，请看：

演示

​

.box {
    width: 20px;
    height: 20px;
    background-color: royalblue;

    animation-fill-mode: forwards;
    animation:
            sine1-1 0.3s 1 0s cubic-bezier(0,0,0.3642,1),
            sine1-2 0.3s 1 0.3s cubic-bezier(0.6358,0,1,1),
            sine1-3 0.3s 1 0.6s cubic-bezier(0,0,0.3642,1),
            sine1-4 0.3s 1 0.9s cubic-bezier(0.6358,0,1,1),
            sine2-1 0.3s 1 1.2s cubic-bezier(0,0,0.3642,1),
            sine2-2 0.3s 1 1.5s cubic-bezier(0.6358,0,1,1),
            sine2-3 0.3s 1 1.8s cubic-bezier(0,0,0.3642,1),
            sine2-4 0.3s 1 2.1s cubic-bezier(0.6358,0,1,1),
            sine3-1 0.3s 1 2.4s cubic-bezier(0,0,0.3642,1),
            sine3-2 0.3s 1 2.7s cubic-bezier(0.6358,0,1,1);
}

@keyframes sine1-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-100px)}
}

@keyframes sine1-2 {
    0% {transform: translateY(-100px)}
    100% {transform: translateY(0)}
}

@keyframes sine1-3 {
    0% {transform: translateY(0)}
    100% {transform: translateY(80px)}
}

@keyframes sine1-4 {
    0% {transform: translateY(80px)}
    100% {transform: translateY(0)}
}

@keyframes sine2-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-60px)}
}

@keyframes sine2-2 {
    0% {transform: translateY(-60px)}
    100% {transform: translateY(0)}
}

@keyframes sine2-3 {
    0% {transform: translateY(0)}
    100% {transform: translateY(40px)}
}

@keyframes sine2-4 {
    0% {transform: translateY(40px)}
    100% {transform: translateY(0)}
}

@keyframes sine3-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-20px)}
}

@keyframes sine3-2 {
    0% {transform: translateY(-20px)}
    100% {transform: translateY(0)}
}

.horizontal {
    animation: move-horizontal 3s 1 linear;
}

@keyframes move-horizontal {
    0% {transform: translateX(0)}
    100% {transform: translateX(400px)}
}

.wrap {
    background-color: #bfbfbf;
}

.margin {
    width: 100px;
    height: 100px;
}

<div class="margin"></div>
<div class="wrap">
    <div class="horizontal">
        <div class="box"></div>
    </div>
</div>

​