2

Почему анимация не срабатывает, хотя на элементе висят нужные свойства?

@keyframes loader-box {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(0.2)
  }
  100% {
    transform: scale(1)
  }
}

.ajax-loader span {
  animation: loader-box 2s infinite linear;
  -webkit-animation: loader-box 2s infinite linear;
}
<div class="ajax-loader">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
</div>

https://jsfiddle.net/t5ny5qdL/5/

2 ответа 2

3

Потому что спан инлайновый, добавьте ему инлайн-блок:

@keyframes loader-box {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(0.2)
  }
  100% {
    transform: scale(1)
  }
}

.ajax-loader span {
  display: inline-block;
  animation: loader-box 2s infinite linear;
  -webkit-animation: loader-box 2s infinite linear;
}
<div class="ajax-loader">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
</div>

2
 display: inline-block;

Добавите в

.ajax-loader span {    
  animation: loader-box 2s infinite linear;
  -webkit-animation: loader-box 2s infinite linear;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.