这是一个粗略的例子,以帮助显示我想要的：
http://jsfiddle.net/GVaNv/
我想知道是否还有从左侧进行叠加过渡,但是从右侧离开.
因此,在悬停时,叠加层会像示例中那样进入,但不是向后退到左侧,而是向右转换.
这可能吗？ (不一定需要使用转换,我可以通过任何方式进行转换).
解决方法
这是一个不需要更多HTML或JavaScript的简单解决方案：
<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,没有动画.这允许左侧动画从元素的左侧发生.
>在鼠标移出时,边缘被动画化以在元素的右侧进入其静止状态.
