Планирали сме много анимации и търсим по-чист начин за справяне с всички браузъри. Нещо нахално като това би било страхотно:
@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
@#{$browser}keyframes rotate {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
}
С изключение на това, че @#{$vendor}keyfr...
създава грешка, очаквайки число или функция след @
. Има ли начин да принудите @
да премине към css?
В противен случай някой измислил ли е по-чист начин да постигне това с @each
, @mixin
или нещо друго, което би спестило изброяването на всяка анимация за всеки браузър (т.е. по-долу)?
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to { -o-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: rotate(360deg);}
}