html - CSS 动画延迟

Question

我的 CSS 有问题，我希望动画在第一个动画后十秒开始，所以我使用了 animation-delay 属性，但它似乎不起作用。你能告诉我我做错了什么吗？ 谢谢。

#txteram {
    position:relative;
    top:-120px; /*-100px*/
    left: 40px;/*50px*//*200px;*/
    opacity: 0;

-webkit-transition: opacity 19s ease-in;
    -moz-transition: opacity 19s ease-in;
    -ms-transition: opacity 19s ease-in;
    -o-transition: opacity 19s ease-in;
    transition: opacity 19s ease-in;
    -webkit-transition: all 5s ease-in-out;/*19*/
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    /*animation delay*/
    animation-delay:15s;
    -webkit-animation-delay:15s;
}
.showtxteram #txteram {
    opacity: 1;
    transform: translate(150px,0);
    -webkit-transform: translate(150px,0);
    -o-transform: translate(150px,0); 
    -moz-transform: translate(150px,0);
}

Answer 1

由于您正在使用转换，因此您需要的属性是 transition-delay，我已经创建了您的演示的工作版本，这是 fiddle :http://jsfiddle.net/sandro_paganotti/dhk8U/1/

-webkit-transition: opacity 1s ease-in, -webkit-transform 1s ease-in 3s;
-moz-transition: opacity 1s ease-in, -moz-transform 1s ease-in 3s;
-ms-transition: opacity 1s ease-in, -ms-transform 1s ease-in 3s;
transition: opacity 1s ease-in, transform 1s ease-in 3s;