Проблема понимания ключевых кадров в CSS - PullRequest
Новая
       18

Проблема понимания ключевых кадров в CSS

0 голосов
/ 20 марта 2019

У меня есть следующие ключевые кадры, с помощью которых я хочу анимировать логотип окон: 

.box {
  height: 40px;
  width: 40px;
  float: left;
}

#box1 {
  #background-color: red;
  animation: box1 4s 1s infinite;
}

#box2 {
  #background-color: lightgreen;
  animation: box2 4s 1s infinite;

}

@keyframes box2 {
   0% {
    background-color: #1b2028;
  }
  25% {
    background-color:  #1b2028;
  }
  50% {
    background-color: #1b2028;
  }
  75% {
    background-color: lightgreen;
  100% {
    background-color: #1b2028;
  }

}

@keyframes box1 {
  0% {
    background-color: red;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: red;
  100% {
    background-color: #1b2028;
  }
}

Проблема, однако, заключается в том, что работает только один ключевой кадр. т.е. работает только ключевой кадр с именем box2, и когда я помещаю ключевой кадр box1 сверху, он работает, почему это так. Может ли кто-нибудь дать мне хорошее понимание ключевых кадров? Ссылка на кодовое имя: https://codepen.io/theredcap/pen/qvJdJa?editors=1100

1 Ответ

2 голосов
/ 20 марта 2019

Вы проверили свой CSS с линтером? CSS lint найдено 4 ошибки и 6 предупреждений.

Исправить следующие ошибки.

  • Ожидаемый RBRACE в строке 54, столбец 9.
  • Ожидаемый RBRACE в строке 72, столбец 9.
  • Ожидаемый RBRACE в строке 90, столбец 9.
  • Ожидаемый RBRACE в строке 107, столбец 9.

Вам не хватает закрытия }:)

Проверьте этот код: https://codepen.io/foxfabi/pen/oVaePr

...