我们计划了很多动画,并且正在寻找一种更简洁的方式来处理所有浏览器。像这样的 sass-y 会很棒:
@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);}
}