Анимация Webkit не работает в индексе. html

Question

Я пытаюсь создать экран загрузки spla sh в angular, пока все загружается в фоновом режиме.

У меня есть анимация webkit на движущихся эллипсах, однако она не работает в индексе . html. Приложение загружает сообщения, но анимация не работает. Кто-нибудь знает, почему анимация не будет работать, если у меня объявлены теги стиля?

<app-root>
      <style type="text/css">
          #pre-bootstrap {
              background-color: #262626;
              bottom: 0px;
              left: 0px;
              position: fixed;
              right: 0px;
              top: 0px;
              z-index: 999999;
          }

          #pre-bootstrap div.messaging {
              color: #FFFFFF;
              font-family: monospace;
              left: 0px;
              margin-top: -37px;
              position: absolute;
              right: 0px;
              text-align: center;
              top: 50%;
          }

          #pre-bootstrap h1 {
              font-size: 22px;
              line-height: 35px;
              margin: 0px 0px 20px 0px;
          }

          #pre-bootstrap p {
              font-size: 18px;
              line-height: 14px;
              margin: 0px 0px 0px 0px;
          }

          #pre-bootstrap span.one {
                      opacity: 0;
                      -webkit-animation: dot 1.3s infinite;
                      -webkit-animation-delay: 0.0s;
                      animation: dot 1.3s infinite;
                      animation-delay: 0.0s;
                  }

          #pre-bootstrap span.two {
              opacity: 0;
              -webkit-animation: dot 1.3s infinite;
              -webkit-animation-delay: 0.2s;
              animation: dot 1.3s infinite;
              animation-delay: 0.2s;
          }

          #pre-bootstrap span.three {
              opacity: 0;
              -webkit-animation: dot 1.3s infinite;
              -webkit-animation-delay: 0.3s;
              animation: dot 1.3s infinite;
              animation-delay: 0.3s;
          }
    </style>

    <div id="pre-bootstrap">
      <div class="messaging">  
          <h1>         
              Application is Loading <span class="one">.</span><span class="two">.</span><span class="three">.</span>  
          </h1>            
        </div>
     </div> 
</app-root>

Answer 1

Вы должны добавить ключевые кадры для css анимации, например:

@keyframes dot{
  from { transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}

Answer 2

Я думаю, что вам не хватает правила @keyframes.

Проверьте эту ссылку для получения дополнительной информации об этом CSS правиле: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes