小编One*_*Egg的帖子

我刚刚为我的代码添加了"动画延迟",以便内容仅在5秒后从屏幕外滑动.但是,我发现正在移动的内容在"延迟"运行时显示在"最终"位置,然后在5秒后内容从左侧滑入(根据需要).

有没有人知道我如何调整我的代码,以便最终位置最初不会显示内容？这是我的代码的精简版:

<style>
div { 
width:100px;
height:100px;
background-color:red;

-webkit-animation: slideFromLeft 3500ms ease-out;
    -moz-animation: slideFromLeft 3500ms ease-out;
    -ms-animation: slideFromLeft 3500ms ease-out;

animation-delay:5s;
    -webkit-animation-delay:5s; /* Safari and Chrome */
}


@-webkit-keyframes slideFromLeft {
            from {
                opacity: 1;
                -webkit-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -webkit-transform: translateX(0%);
            }
        }
        @-moz-keyframes slideFromLeft {
            from {
                opacity: 1;
                -moz-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -moz-transform: translateX(0%);
            }
        }
        @-ms-keyframes slideFromLeft {
            from {
                opacity: 1;
                -ms-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -ms-transform: translateX(0%); …