CSS动画延迟 | CSS动画延迟

本文介绍了CSS动画延迟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I just have a problem in my CSS, I wanted that an animation starts ten seconds after the first animation, so I ues animation-delay property but it seems not working. Can you tell me what I am doing wrong ?Thanks.

#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);
}

推荐答案

尝试将延迟置于行中过渡：

Try placing the delay in line with the transition:

-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 ;

这篇关于CSS动画延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！