Каковы правила идентификатора @keyframes в CSS3? - PullRequest
Новая
       78

Каковы правила идентификатора @keyframes в CSS3?

0 голосов
/ 25 октября 2018

Я работаю над анимацией, и мне было интересно, каковы правила для идентификатора @keyframe.

Например, я делал следующее, но это не сработало.

Код: 

  #banner {
  width: 468px;
  height: 60px;
  background-color: red;
  color: white;
  text-align: center;
  padding-top: 30px;
  font-weight: bold;
  font-size: 2em;
  animation-name: #banner;
  animation-duration: 4s;
}
@keyframes #banner {
  from: {background-color: red;}
  to: {background-color: green;}
}


<div id="banner">Just a banner</div>

1 Ответ

0 голосов
/ 25 октября 2018

Правило @keyframes определяет код анимации.

Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.

Во время анимации вы можете изменить наборCSS-стилей много раз.

Укажите, когда изменение стиля произойдет в процентах, или с ключевыми словами «от» и «до», что равно 0% и 100%.0% - это начало анимации, 100% - когда анимация завершена.

Совет. Для лучшей поддержки браузера всегда следует указывать селекторы 0% и 100%.

Примечание: важное правило игнорируется в ключевом кадре

Подробнее на https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

...