CSS过渡 - 两个方向? [英] CSS Transition - two directions?

本文介绍了CSS过渡 - 两个方向?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!


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

Here is a crude example to help show what I would like: http://jsfiddle.net/GVaNv/


I was wondering if there is anyway to make the overlay transition in from the left, but to then leave from the right side.


So, on hover, the overlay comes in as it is in the example, but instead of retreating back to the left, to transitions to the right.

这是可能吗? (不一定需要使用 transition ,我愿意以任何方式这样做。)

Is this possible? (doesn't necessarily need to use transition, I'm open to any way to do it).



Here is a simple solution that does not require more HTML or JavaScript:

HTML代码: / p>

HTML Code:

<div class="box">
    <div class="overlay">


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

.overlay {
    position: absolute;
    background-color: rgba(0, 0, 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;


This leverages the margin for the animation. It works as follows:

  1. 覆盖休息状态设置在元素的右边,使用边距(而 left 位于元素的左侧。)

  2. 悬停时,我们将边距设置为 0 没有动画。这允许动画从元素的左侧发生。

  3. 鼠标悬停时,边距是动画的到元素右侧的静止状态。

  1. The overlay resting state is set to the right of the element using a margin (while the left is positioned to the left of the element).
  2. Upon hover, we set the margin to 0 without an animation. This allows the left animation to occur from the left side of the element.
  3. Upon mouse-out, the margin is animated to go to its resting state on the right side of the element.


这篇关于CSS过渡 - 两个方向?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

登录 关闭
发送“验证码”获取 | 15天全站免登陆