html – 创建一个在X秒后启动的CSS3动画

我试图为“帮助窗口”创建动画.我希望它在X秒后启动或拥有图像/动画,但由于动画延迟属性在此处不适用,因为它在播放之前暂停静止图像,因此存在问题.

有关webkits或属性的任何想法可以在这里尝试吗？

见链接在这里;
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,Opera */
    -webkit-animation-fill-mode: forwards;  /* Chrome,Opera */
    animation: mymove 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

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

}

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

解决方法

只需更改左：0到左：.hello类中的-300px