Как сделать анимацию keyframes на SCSS не нарушив синтаксис?

Question

[funkydance]

Доброй ночи. Нужно сделать анимацию достаточно длинную по кадрам, решил сделать на SCSS, но столкнулся с тем, что переменная рядом с % вызывает ошибку синтаксическую.

@for $i from 100 to 33 {
  @keyframes backwheel {
    #{$i}% {
      background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6186274509803921) #{$i} %);
      }
  }
}

В документации об этом ничего не сказано.

Answer 1

[Пес Барбос]

У Вас скорее всего ошибка. Вы все обернули в функцию. т. Е. Вы 77 раз создадите анимацию backwheel. Вам нужно поместить цикл внутрь кийфреймс

Comments

[funkydance]

Да, так и оказалось)))

[Пес Барбос]

Вообще зачем вам пошаговое прописывать? Можно же прописать 0 и 100, задав начальное и конечное значение. Результат будет тот же. То, что вы делаете, называется overengineering

[funkydance]

HungryGrizzzly, Первый раз слышу про это определение, но Вы правы))

[Пес Барбос]

=)

Answer 2

[Rustam Bainazarov]

Но у меня вопрос! Зачем столько кадров? Анимируйте только именно background-size, просто отдельным свойством, а не в составе background:



Тогда и кода будет в десятки раз меньше.

~ ~ ~ ~ ~

Ну а так, то вот:

@keyframes backwheel {
  @for $i from 100 to 33 {
    #{$i * 1%} {
      background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) #{$i * 1%});
    }
  }
}

Генерирует вот это:

@keyframes backwheel {
  100% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 100%);
  }
  99% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 99%);
  }
  98% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 98%);
  }
  /* И так далее */
}

Comments

[funkydance]

Спасибо большое. Помогли очень. Теперь буду знать свою ошибку

[funkydance]

Пытаюсь сделать зум с затемнением.

[Rustam Bainazarov]

funkydance, я к тому, что у вас всего лишь тут два кадра: 100% и 33%. И линейное изменение.

Хватите, короче говоря, только их двух, промежуточные (от 99 до 34%) браузер сам создаёт. Ну и плюс анимация на 33-м проценте будет обрываться.

[Rustam Bainazarov]

funkydance, а, ну и я не знаю, будет ли работать обратное перечисление (от 100 в меньшую сторону) вообще, кстати.

[funkydance]

Рустам Байназаров, Если делать 100 и 33 % ток, то анимация происходит рывками.

https://jsfiddle.net/e1vfwgyn/

Обратное работает) но в примере выше сделал как обычно. Вот поэтому я пытаюсь на scss сделать по каждому % анимацию

[Rustam Bainazarov]

funkydance, не вижу рыков.

[Rustam Bainazarov]

funkydance, а, всё. Понял. Вы же анимируете неанимируемое свойство. Поэтому у вас визуальным хаком сделано. Понятно.

[funkydance]

Рустам Байназаров, Хотя уже всё, скорость на минимум сделал и исчезли. Хотел плавности на 2-3 секунды сделать, в итоге на 0.1 самое то)))
Спасибо, помогли разобраться)

[Rustam Bainazarov]

funkydance, сейчас пришлю вариант проще.

[Rustam Bainazarov]

funkydance, анимируйте только именно background-size, просто отдельным свойством, а не в составе background:



Тогда и кода будет в десятки раз меньше.

[funkydance]

Рустам Байназаров, Хорошо, понял. Учту) Спасибо.