Making animated keyframes text with scss

Question

I have seen this codepen project and I don't know how could I make it work in scss !

Here is the CSS one you can switch to SCSS and see it will not work:

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>

Could anyone convert it to SCSS

Actually it works but does anyone know how to make this work in SCSS cause it shows error when I switch to it!

Answer 1

Try this:

#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"

Maybe this page helps you.

Answer 2

Thank you, the site you send me did good correction and now its works but the text you send me above wasn't working so i tried this page and its works. Thank you again!