Как сделать плавное появление картинки слева на право?

Question

[dim5on]

Добрый вечер ! Подскажите пожалуйста как сделать что бы картинка появлялась плавно слева на право. Сейчас она просто появляется плавно а мне нужно что бы появлялась слева на право.
Есть такой код:

.advantages {
    position: relative;
    z-index: 0;
    background-image: url(../img/advantages.jpg);
    background-position: left bottom;
    background-size: cover;
    padding-bottom: 335px;
}
.advantages:after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    background-image: url(../img/advantages-color.jpg);
    background-size: cover;
    -webkit-transition: opacity 6s ease-in-out;
    -o-transition: opacity 6s ease-in-out;
    transition: opacity 6s ease-in-out;
}

Answer 1

[Павел]

opacity - это прозрачность , вот она у тебя из прозрачной становится видимой , а надо пойти в гугл и почитать про это свойство htmlbook.ru/css/transition

вторая ссылка из поиска gnatkovsky.com.ua/css-animaciya-elementov.html чудесный материал

Answer 2

[Robert Bl]

Задайте смещение через transform: translateX(300px), и в transition поставьте вместо opacity transform

Answer 3

[vladimir_html]

https://jsfiddle.net/tv8fzhtm/. Вместо :hover можно повесить onclick джаваскрипта