CSS анимация для моего сайта не работает ни в одном браузере - PullRequest
0 голосов
/ 04 августа 2020

Я пытаюсь добавить анимацию, чтобы создать что-то вроде карусели, но часть анимации в моем CSS не работает.

div#trustw {
  padding: 20px;
}

div#trustc {
  height: 38px;
  background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
  background-repeat: repeat-x;
  -webkit-animation: animatedBackground 20s linear infinite;
  animation: animatedBackground 20s linear infinite;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: animatedBackgroud;
}
    <div id="trustw" class="container-fluid">
      <div id="trustc" class="container"></div>
    </div>

1 Ответ

0 голосов
/ 04 августа 2020

Вы забыли определить анимацию:

    @keyframes animatedBackgroud {
      from {background-position: 0%;}
      to {background-position: 100%;}
    }

div#trustw {
  padding: 20px;
}

div#trustc {
  height: 38px;
  background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
  background-repeat: repeat-x;
  -webkit-animation: animatedBackground 20s linear infinite;
  animation: animatedBackground 20s linear infinite;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: animatedBackgroud;
}

@keyframes animatedBackgroud {
  from {background-position: 0%;}
  to {background-position: 100%;}
}
<div id="trustw" class="container-fluid">
      <div id="trustc" class="container"></div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...