Использование задержки анимации CSS (мерцание) с динамическим текстом - PullRequest
Новая
       12

Использование задержки анимации CSS (мерцание) с динамическим текстом

0 голосов
/ 03 мая 2019

Текст, который я анимирую справа налево, является динамическим (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;
}
...