Почему CSS-анимация сбрасывает цвет объекта на исходный цвет? - PullRequest
Новая
       0

Почему CSS-анимация сбрасывает цвет объекта на исходный цвет?

0 голосов
/ 11 сентября 2018

Я играл с CSS-анимацией, заставляя некоторый текст переходить от одного цвета к другому. Это сработало бы, но затем закончилось бы возвращением текста к исходному цвету текста. Что здесь происходит и как я могу предотвратить это? 

body {
  background-color: black;
  color: red;
}

#l0 {
  animation-name: fadein;
  animation-duration: 4s;
  animation-timing-function: linear;
}

@keyframes fadein {
  from {
    color: black;
  }
  to {
    color: white;
  }
}
<body id="l0">
  <h1>
    Hello
  </h1>
</body>

Должен ли я также установить класс объекта, чтобы сказать "остаться в этом цвете"?

1 Ответ

0 голосов
/ 11 сентября 2018

Это поведение анимации по умолчанию, чтобы анимированный элемент сохранял последнее значение, вам нужно установить режим заполнения анимации на forwards, например,

Режим заполнения анимации: вперед 

body {
  background-color: black;
  color: red;
}

#l0 {
  animation-name: fadein;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards
}

@keyframes fadein {
  from {
    color: black;
  }
  to {
    color: white;
  }
}
<body id="l0">
  <h1>
    Hello
  </h1>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...