CSS Анимация «слайд в стороне от» не работает на Chrome

Question

Я немного новичок в CSS-анимации, извинений, если это глупый вопрос :) У меня есть следующий HTML:

<div class="slideToView" rel="{{product}}"> 
    <div class="info" rel="{{product}}"> 
     Info 
    </div> 
    <div class="remove" rel="{{product}}"> 
     Remove 
    </div> 
    <div style="clear:both"></div> 
</div> 

.. И следующий CSS:

/* slider option */ 

.slideToView { 
    z-index: 1000000; 
    background: green; 
    position: absolute; 
    right: -200px; 
    top: 0px; 
    width: 200px; 
} 
.slideToView.visible { 
    transition: 1.5s; 
    right: 5px; 
    -webkit-animation: slide 0.5s forwards; 
    -webkit-animation-delay: 1.5s; 
    animation: slide 0.5s forwards; 
    animation-delay: 1.5s; 
} 

.slideToView.dohide { 
    transition: 1s; 
    right: -200px; 

    -webkit-animation: slide 0.5s backwards; 
    -webkit-animation-delay: 1s; 

    animation: slide 0.5s backwards; 
    animation-delay: 1s; 
} 

.slideToView .info { 
    float: left; 
    width: 50%; 
    background: #b0b6bb; 
    line-height: 100px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    border-left: 1px solid #95ACBF; 
    box-sizing: border-box; 
} 

.slideToView .remove { 
    float: left; 
    width: 50%; 
    background: #ff0000; 
    line-height: 100px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
} 


@-webkit-keyframes slide { 
    100% { left: 0; } 
} 

@keyframes slide { 
    100% { left: 0; } 
} 
/* end slider options */ 

Если я запускаю код в Firefox, она отлично работает:

Однако в Chrome он выскальзывает нормально - но тогда он идет к левой части страницы:

Как я уже сказал, я совершенно новой для использования CSS-анимации - но AFAIK У меня все в порядке.

Вы можете увидеть основной пример этого происходит здесь:

https://jsfiddle.net/unbmajwv/3/

Спасибо за ваше время!

Answer 1

Добавить dohide класс slideToView в html. И добавьте opacity: 0 в класс .slideToView и opacity: 1 в класс .slideToView.visible.

Обновлено скрипку: https://jsfiddle.net/unbmajwv/4/