CSS переход - два направления?

Question

Вот грубый пример, чтобы помочь показать, что я хотел бы: http://jsfiddle.net/GVaNv/

Мне было интересно, если есть в любом случае, чтобы сделать наложение transition в слева, но затем уйти с правой стороны.

Таким образом, при наведении наложение появляется, как в примере, но вместо того, чтобы отступить назад влево, transitionс направо.

Это возможно? (не обязательно использовать transitionЯ открыт для любого способа сделать это).

Answer 1

Вот простое решение, которое не требует больше 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, 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;
}

Это использует запас для анимации. Это работает следующим образом:

1. Состояние покоя установлено справа от элемента с помощью поля (в то время как left расположен слева от элемента).
2. При наведении мы устанавливаем поле на 0 без анимации. Это позволяет left анимация происходит с левой стороны элемента.
3. После наведения мыши поле анимируется, чтобы перейти в исходное состояние с правой стороны элемента.

JSFiddle

Answer 2

Я пытался добиться этого только с помощью CSS, включая добавление разметки div, как показано ниже. DEMO

HTML

<div class="box">
    <div class="overlay">
        Overlay
    </div>
    <div class="overlayFalse">
        Overlay false
    </div>
</div>

CSS

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

.overlay, .overlayFalse {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 96%;
    color: white;
    padding: 2%;
    right:-274px;
    bottom: 0;
    transition: right 300ms ease-out, left 300ms ease-out;

}

.overlayFalse{
    opacity:0;
    right:auto;
    left:-274px;
}

.box:hover .overlay {
    right:0;
    opacity:0;
}

.box:hover .overlayFalse{
    opacity:1;
    left:0;
}

Answer 3

Возможно, вы можете использовать анимацию CSS3, используя одну для вставки, а другую для выдвижения:

@keyframes overlay-in {
  from {
    left: -999px;
  }

  to {
    left: 0;
  }
}

@keyframes overlay-out {
  from {
    left: 0;
  }

  to {
    left: 999px;
  }
}

Теперь вы можете применить overlay-in анимация на :hover и другой в определении нормального элемента:

.box .overlay {
    /* other definitions ... */
    animation-name: overlay-out;
    animation-duration: 1000ms;
    animation-fill-mode: none;
}

.box:hover .overlay {
    animation-name: overlay-in;
    animation-duration: 600ms;
    animation-fill-mode: forwards;
}

Но есть одна проблема: анимация слайда будет воспроизводиться один раз при загрузке страницы. Я не могу найти способ предотвратить это без крошечного JavaScript, добавив класс в оверлей на первом mouseout событие. Я сделал это таким образом в JSFiddle.

Но, разумеется, как только вам потребуется JavaScript, вы также можете использовать простые переходы. Но этот метод работает даже без JavaScript, если вы можете жить с анимацией, воспроизводимой при загрузке страницы.