@funkydance

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

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

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


5daa5a33ea16f513754326.png
В документации об этом ничего не сказано.
  • Вопрос задан
  • 2099 просмотров
Решения вопроса 2
@HungryGrizzzly
Сумасшедший кросс
У Вас скорее всего ошибка. Вы все обернули в функцию. т. Е. Вы 77 раз создадите анимацию backwheel. Вам нужно поместить цикл внутрь кийфреймс
Ответ написан
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Но у меня вопрос! Зачем столько кадров? Анимируйте только именно 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%);
  }
  /* И так далее */
}


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы