Что означает 100% в @keyframes?

Question

Вопрос такой: что значит,если в @keyframes указываются только 100%(эквивалентно to) или только 0% (эквивалентно from).

Например:

@keyframes spin_1 {100% { transform: rotate(360deg); }}

@keyframes spin_2 {0% { transform: rotate(360deg); }}

.block_3 {
  width: 50px;
  height: 50px;
  background: pink;
  animation: block 3s infinite linear;
  margin: 0 auto;
  margin-top: 30px;
  transform-origin: 60px 60px;
}

@keyframes block {
  100% {
    transform: rotate(360deg)
  }
}

<div class="block_3"></div>

Answer 1

0% - начало, то есть, с этого должна начинаться анимация.

100% - конец, то есть, к такому кадру должен прийти элемент к концу анимации.

Также вы можете указывать промежуточные состояния. Всё это также делается с помощью процентов.

Например: вам надо чтобы к середине анимации поменялся цвет текста на красный, тогда вместо 100% вы пишите 50% и говорите {color:red;} и цвет должен плавно поменяться на нужный

Answer 2

можно сказать, что если в animation-duration указано значение 3s, то при употреблении ТОЛЬКО 100%(или from), анимация начнется через целых три секунды. Однако, этого не происходит (см. пример в вопросе)

100% обозначает финиш анимации, то есть to,
from это 0% - старт анимации

Ваш пример можно было бы написать в подробной форме и она будет аналогична вашей сокращенной записи:

.block_3 {
  width: 50px;
  height: 50px;
  background: pink;
  animation: block 3s infinite linear;
  margin: 0 auto;
  margin-top: 30px;
  transform-origin: 60px 60px;
}

@keyframes block {
  0% {
     transform: rotate(0deg);}

  100% {
    transform: rotate(360deg);
  }
}

<div class="block_3"></div>

Отложить начало анимации можно командой animation-delay:3s;

.block_3 {
      width: 50px;
      height: 50px;
      background: pink;
      animation: block 3s infinite linear;
      animation-delay:3s;
      margin: 0 auto;
      margin-top: 30px;
      transform-origin: 60px 60px;
    }

    @keyframes block {
      0% {
         transform: rotate(0deg);}

      100% {
        transform: rotate(360deg);
      }
    }

<div class="block_3"></div>

Или можно добавить задержку в сокращенную форму записи

animation: block 3s infinite 3s linear;

.block_3 {
  width: 50px;
  height: 50px;
  background: pink;
  animation: block 3s infinite 3s linear;
  margin: 0 auto;
  margin-top: 30px;
  transform-origin: 60px 60px;
}

@keyframes block {
  0% {
     transform: rotate(0deg);}

  100% {
    transform: rotate(360deg);
  }
}

<div class="block_3"></div>

БЛОГ НА HUSL

Что означает 100% в @keyframes?

Ответы (2 шт):