Как создать анимацию при помощи sass?

Question

[Ростислав Сергеевич]

Приветствую.

В css мы создаём анимацию вот так:

@keyframes name {
  0% {

  }
  100% {

  }
}

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

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

Comments

[vasIvas]

если файлы имеют расширение .sass, то скобки не нужны

Answer 1

[Ma98Thor]

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

Вот рабочий пример. Объект с id=phone будет при наведении покачиваться.

#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})

Comments

[Ростислав Сергеевич]

Сложно конечно. Легче на чистом css написать. Но за ответ спасибо большое.

Answer 2

[Ramazanches]

.selector
width: 0
animation: name 1s ease

@keyframes name
from
width: 0
to
width 100vw

Не забывайте 'Tab'нуть правильно, sass требователен к отступам

Comments

[mikromajor]

Спасибо, выставил отступы, все работает, а главное ПОНЯТНО!!!

Answer 3

[Дмитрий Христоев]

@keyframes name
0%
100%

не?