Создание анимированных ключевых кадров текста с помощью scss

Question

Я видел этот проект codepen, и я не знаю, как я могу заставить его работать в scss!

Вот тот CSS, который вы можете переключить на SCSS, и увидите, что он будет не работает:

https://codepen.io/pigne/pen/XXNrGj

#spin {
  color:red;
}
#spin:after {
  content:"";
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { content:"ipsum"; }
  10% { content:"dolor"; }
  20% { content:"sit"; }
  30% { content:"amet"; }
  40% { content:"consectetur"; }
  50% { content: "adipisicing"; }
  60% { content: "elit"; }
  70% { content: "Hic"; }
  80% { content: "atque"; }
  90% { content: "fuga"; }
}

<p>Lorem <span id="spin"></span>!</p>

Может ли кто-нибудь преобразовать его в SCSS

На самом деле это работает, но кто-нибудь знает, как заставить эту работу в SCSS вызвать его показывает ошибку при переключении на него!

Answer 1

Спасибо, сайт вы отправили мне исправление, и теперь оно работает, но текст, который вы отправили мне выше, не работал, поэтому я попробовал эту страницу и его работы. Еще раз спасибо!

Answer 2

Попробуйте:

#spin
  color: red

  &:after
    content: ""
    animation: spin 2s linear infinite

@keyframes spin
  0%
    content: "ipsum"  

  10%
    content: "dolor"  

  20%
    content: "sit"  

  30%
    content: "amet"  

  40%
    content: "consectetur"  

  50%
    content: "adipisicing"

  60%
    content: "elit"

  70%
    content: "Hic"

  80%
    content: "atque"

  90%
    content: "fuga"

Возможно эта страница поможет вам.