CSS cubic-bezier 不会动画回到原来的位置

Question

我有这个有点简单的动画。当鼠标悬停在目标元素上时，它可以很好地执行动画，但是当光标悬停在目标元素外时，它不会转换回原始位置。相反，它只是在一次跌倒和丑陋的猛扑中迅速反弹。 :)

<article class="anim">
    <a href="#foo">
        <img src="https://dummyimage.com/240x200/ff9900/fff.png&text=TADA" alt="foo">
        <span class="left">
            <img src="https://dummyimage.com/240x200/121212/fff&text=hey+you" alt="left">
        </span>
        <span class="right">
            <img src="https://dummyimage.com/240x200/000/fff&text=hey+you" alt="right">
        </span>
    </a>
</article>

这是scss:

.anim {
    $w: 240px;
    $h: 200px;
    width: $w;
    height: $h;
    overflow: hidden;
    a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }
    img {
        z-index: 1;
        position: absolute;
        width: $w;
        top: 0;
        left: 0;
    }
    span {
        display: block;
        height: 100%;
        width: 50%;
        position: absolute;
        z-index: 2;
        overflow: hidden;

        // This animation snaps back uglily.
        transition: all cubic-bezier(.29, 1.01, 1, -0.68) 0.5s;

        // This animation transitions back just fine...
        //transition: all 0.5s ease-in 0s;
    }

    .left {
        left: 0px;
    }
    .right {
        right: 0px;
        img {
            margin-left: -100%;
        }
    }

    a:hover > .left {
        left: -100%;
    }
    a:hover > .right {
        right: -100%;
    }
}

我不明白的是，注释掉的动画(使用 easy-in)可以顺利过渡回来，但 cubic-bezier 则不会。

我不知道这里缺少什么。这是一支笔:

https://codepen.io/FernandoBasso/pen/XqrOpV?editors=1100

Answer 1

原因是在下面的代码中

a:hover > .left {
    left: -100%;
}
a:hover > .right {
    right: -100%;
}

值 -100% 将 div 发送到太远而看不到相反的效果。使用 -50% 代替你想要的! :)

检查一下: https://codepen.io/sotmihos/pen/yjLqJK