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

Answer 2

您可以反转 cubic-bezier 来实现：

（不要介意 javascript 函数，它只是为了展示如何反转 cubic-bezier ）

function reverseCssCubicBezier(cubicBezier) {
    var maxX = Math.max(cubicBezier[0].x, cubicBezier[1].x, cubicBezier[2].x, cubicBezier[3].x);
    var maxY = Math.max(cubicBezier[0].y, cubicBezier[1].y, cubicBezier[2].y, cubicBezier[3].y);
    var halfUnitTurn = function(v) {
        var tx = maxX/2, ty = maxY/2;
        return { x: tx - (v.x-tx), y: ty - (v.y-ty) };
    };
    var revd = cubicBezier.map(halfUnitTurn);
    return revd.reverse();
}

var ease = [{x:0,y:0}, {x:0.29,y:1.01}, {x:1,y:-0.68}, {x:1,y:1}]; 
var ease_reversed = reverseCssCubicBezier(ease);
var ease_css_string = 'cubic_bezier(' + [ease[1].x, ease[1].y, ease[2].x, ease[2].y].join(', ') + ')';
var ease_reversed_css_string = 'cubic_bezier(' + [ease_reversed[1].x, ease_reversed[1].y, ease_reversed[2].x, ease_reversed[2].y].join(', ') + ')';

console.log('ease_css_string : ', ease_css_string)
console.log('ease_reversed_css_string : ', ease_reversed_css_string)

.anim {
  width: 240px;
  height: 200px;
  overflow: hidden;
}
.anim a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.anim img {
  z-index: 1;
  position: absolute;
  width: 240px;
  top: 0;
  left: 0;
}
.anim span {
  display: block;
  height: 100%;
  width: 50%;
  position: absolute;
  z-index: 2;
  overflow: hidden;
  transition: all cubic-bezier(0, 1.69, 0.71, 0) 0.5s; /* added */
}
.anim .left {
  left: 0px;
}
.anim .right {
  right: 0px;
}
.anim .right img {
  margin-left: -100%;
}
.anim a:hover > span {
  transition: all cubic-bezier(0.29, 1.01, 1, -0.68) 0.5s; /* added */
}
.anim a:hover > .left {
  left: -100%;
}
.anim a:hover > .right {
  right: -100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

CSS cubic-bezier doesn't animate back to the original position

css

animation

transition