在 css 中简化动画
Simplify animations in css
我的项目中有以下scss文件
&.care-loading-icon{
.glyphicon-refresh-animate {
@include care-loading-animation
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
@-webkit-keyframes spinw {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinm {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
}
我想知道是否有任何方法可以用波旁威士忌来简化这个?
从 the documentation 看来,您可以使用 mixin keyframes
来简化关键帧的实现。
像这样
@include keyframes(spin) {
from { @include transform(0deg); }
to { @include transform(360deg); }
}
我的项目中有以下scss文件
&.care-loading-icon{
.glyphicon-refresh-animate {
@include care-loading-animation
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
@-webkit-keyframes spinw {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinm {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
}
我想知道是否有任何方法可以用波旁威士忌来简化这个?
从 the documentation 看来,您可以使用 mixin keyframes
来简化关键帧的实现。
像这样
@include keyframes(spin) {
from { @include transform(0deg); }
to { @include transform(360deg); }
}