我可以以某种方式使用CSS的三次贝塞尔曲线来变换x，y而不是控制时间吗？

Question

我设法通过以下SCSS调整上下左右的时间：

.Cursor-container {
    .left {
        position: absolute;
        transition: left 6s;
        transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

        .top {
            position: absolute;
            transition: top 6s;
            transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
        }
    }
}

但是我真正想要的是为元素的动画创建曲线路径。

我设法用Javascript做到了这一点，但是它不如CSS流畅，可能不是3D加速的：

import React, { Component } from "react";
import "./Cursor.css";
import cursorDefault from "./default.svg";
import BezierEasing from "bezier-easing";

export class Cursor extends Component {
    state = {};

    changeDestination = (x, y, steps = 500) => {
        clearInterval(this.interval);

        this.steps = steps;
        this.i = 0;
        this.sx = this.x;
        this.sy = this.y;
        this.dx = x - this.x;
        this.dy = y - this.y;

       // easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points.
        this.easing = BezierEasing(0, 0, 1, 0.5);
        this.interval = setInterval(this.step, 10);
    };

    step = () => {
        this.i += 1;
        this.x = this.sx + (this.dx * this.i) / this.steps;
        this.y = this.sy + this.dy * this.easing(this.i / this.steps);
        this.refs.img.style.left = this.x + "px";
        this.refs.img.style.top = this.y + "px";

        if (this.i === this.steps) {
            clearInterval(this.interval);
        }
    };

    componentDidMount() {
        this.x = 0;
        this.y = 0;

        this.changeDestination(800, 400);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <div className="Cursor-container">       
                        <img
                            ref="img"
                            src={cursorDefault}
                            style={{ position: "absolute" }}
                        />  
            </div>
        );
    }
}

export default Cursor;

请注意，我没有使用ReactJS的内部状态机制来保存重新渲染。也许使用ReactJS的内置动画API会产生更好的效果？