创建 X 秒后开始的 CSS3 动画

Question

我正在尝试为 "help window" 创建动画。我希望它在 X 秒后启动或有 image/animation，但我遇到了问题，因为动画延迟属性在这里不适用，因为它会在播放之前暂停静止图像。

对 webkit 或属性有什么想法可以在这里尝试吗？

见link这里； http://hardystewartdesign.com/dist/project.html

    .hello {
    width: 211px;
    height: 115px;
    background: none;
    position: fixed;
    bottom: 0px;
    left: 0px;
    -webkit-animation: mymove 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;  /* Chrome, Safari, Opera */
    animation: mymove 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: -300px;}
    to {left: 0px;}

}

@keyframes mymove {
    from {left: -300px;}
    to {left: 0;}
}

Answer 1

只需在 .hello class

中将 left: 0 更改为 left: -300px

创建 X 秒后开始的 CSS3 动画

Create an CSS3 animation that starts after X seconds

html

css

animation

css-animations