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

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

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

CSS 动画 "slide in from side" 无法在 Chrome 上运行

CSS Animation "slide in from side" not working on Chrome

css

css-animations