徘徊时，如何减慢变换并防止元素的转移？

Question

我正在尝试创建一个悬停时会减慢的选选。

我设法使“放慢脚步”分类，但是由于某种原因，徘徊时的元素会发生变化。

我四处搜索并了解它可能与变换原点有关，但无法弄清楚什么。

• 预期行为：元素不会改变，并且会优雅地减慢（如果有道理）。

提前致谢！

<div class="wrapper">
<div class="track">
    <div class="content">
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
    </div>
</div>

CSS

<style lang="scss">
    :root {
        --animationTiming: 100s;
    }

    .wrapper {
        position: relative;
        width: 100vw;
        max-width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .track {
        position: absolute;
        white-space: nowrap;
        will-change: transform;
        animation: marquee var(--animationTiming) linear infinite;

        &:hover {
            --animationTiming: 120s;
            transition: cubic-bezier(0.47, 0, 0.745, 0.715);
            transition-duration: 3s;
            transition: transform 500ms ease-in-out 25ms;
            transform-origin: top right;
        }
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    .content {
        display: flex;
    }

    .box {
        width: 500px;
        height: 500px;
        background-color: red;
        border: 1px solid #000;
    }
</style>