CSS过渡 – 两个方向？

这是一个粗略的例子,以帮助显示我想要的： http://jsfiddle.net/GVaNv/

我想知道是否还有从左侧进行叠加过渡,但是从右侧离开.

因此,在悬停时,叠加层会像示例中那样进入,但不是向后退到左侧,而是向右转换.

这可能吗？ (不一定需要使用转换,我可以通过任何方式进行转换).

解决方法

这是一个不需要更多HTML或JavaScript的简单解决方案：

HTML代码：

<div class="Box">
    <div class="overlay">
        Overlay
    </div>
</div>

CSS代码：

.Box {
    height: 250px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    background-color: rgba(0,0.5);
    width: 100%;
    color: white;
    padding: 10px;
    left: -270px;
    margin-left: 520px;
    bottom: 0;
    transition: left 300ms linear,margin-left 300ms ease-out;
}

.Box:hover .overlay {
    left: 0;
    margin-left: 0;
    transition: left 300ms ease-out;
}

这利用了动画的余量.它的工作原理如下：

>使用边距将叠加静止状态设置在元素的右侧(而左边位于元素的左侧).
>悬停时,我们将边距设置为0,没有动画.这允许左侧动画从元素的左侧发生.
>在鼠标移出时,边缘被动画化以在元素的右侧进入其静止状态.

JSFiddle

原文地址：https://www.jb51.cc/css/216064.html