CSS 动画 "slide in from side"无法在 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 动画还很陌生 - 但据我所知，我掌握了一切。

您可以在此处看到发生这种情况的基本示例:

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

感谢您的宝贵时间!

Answer 1

在html中的slideToView中添加dohide类。并将opacity: 0 添加到.slideToView 类，将opacity: 1 添加到.slideToView.visible 类。

更新了 fiddle :https://jsfiddle.net/unbmajwv/4/