Question

我从右到左的动画文字是动态（innerHTML），来自Google表格。如果我用较长的动画时间（3秒）来解决问题，则在动画运行之前，文本不会短暂出现在最终位置。如果我正确使用了动画延迟，则动态文本会短暂出现，然后消失，然后进行动画处理。

有没有一种方法可以在动画运行之前隐藏此文本，因此我可以适当地使用延迟。（在动态数据可用之前，它一直隐藏在JS中）。

#container {
position:relative;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-size: 21px;
position: relative;
width: 300px;
height: 250px;
border: 1px solid #999;
overflow: hidden;
}
#loader {
text-align: center;
line-height: 250px;
}
#content > div {
position: absolute;
}
 #animation_container {
 position:relative;
  top:0;
left:0;
z-index:-100;
}
#headline, #subline {
font-weight: 500;
line-height: 26px
}


 #headline {
width:100%;
text-align: center;
font-size: 18px;
-moz-animation-duration: 4s;
-webkit-animation-duration: 4s;
 -moz-animation-name: slidein;
 -webkit-animation-name: slidein;
     }
     @-moz-keyframes slidein {
        from {
           margin-right:100%;
           width:300%
        }
        to {
           margin-left:0%;
           width:100%;
        }
     }
     @-webkit-keyframes slidein {
        from {
           margin-right: 100%;
           width:300%
        }
        to {
           margin-left:0%;
           width:100%;
        }
     }    


 #subline {
 font-size: 23px;
 top: 90px;
 left: 15px;
 }
 #content.show {
 display: block;
 }
 #content.hide, #loader.hide {
 display: none;
 }
#loader.show {
display: block;
}

在动态文本中使用CSS动画延迟（闪烁）

0 个答案: