CSS动画延迟答案

【问题标题】：CSS animation delayCSS动画延迟
【发布时间】：2014-05-08 16:49:55
【问题描述】：

我的 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);
}

【问题讨论】：

我用的是火狐浏览器

标签： html css animation delay

【解决方案1】：

由于您正在使用转换，因此您需要的属性是 transition-delay，我已经创建了您演示的工作版本，这里是小提琴：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;

【讨论】：

谢谢桑多。我也喜欢你的解决方案

【解决方案2】：

尝试将延迟与转换保持一致：

-webkit-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-moz-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-ms-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-o-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
transition: opacity 19s ease-in, all 5s ease-in-out 15s ;

【讨论】：

感谢 jacelysh，它似乎有效。我现在必须在我的 Firefox 浏览器中进行测试。
好的。请让我知道它是否适用于 Firefox。顺便说一句，我编辑了代码并将转换放在同一行。你也可以试试这个以获得更整洁的代码。