在webkit动画延迟运行之前停止最初显示的内容

时间:2013-12-08 15:14:59

标签: html css webkit css-animations

我刚刚为我的代码添加了“动画延迟”,以便内容仅在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%);
            }
                }


</style>

<body>

<div>

1 个答案:

答案 0 :(得分:5)

opacity:0添加到初始div的css中。这样,在动画设置完成之前它是不可见的。

此外,添加animation-fill-mode: forwards;以使其保持最终状态。

http://jsfiddle.net/L29rW/1/