How to create animation with sass?

Question

css

Greetings.
In css we create animation like this:

@keyframes name {
  0% {

  }
  100% {

  }
}

Как делать это через sass?

ЗЫ: Гуглил и читал документацию. Ничего не нашёл

Answer 1

@keyframes name
  @for $i from 0 through 10 
    #{$i*10%}
      css свойства (могут зависеть от $i)

Here is a working example. The object with id=phone will wiggle on hover.

#phone:hover 
  $a: 1
  animation: swinging 7s ease-in-out 0s infinite
  @keyframes swinging
    @for $i from 0 through 5 
      $a: -$a
      #{$i*5%}
        transform: rotate(#{(25-$i*$i)*$a+deg})

Answer 2

.selector
width: 0
animation: name 1s ease
@keyframes name
from
width: 0
to
width 100vw
Don't forget to 'Tab' correctly, sass is picky about padding

Answer 3

@keyframes name
0%
100%
not?