我有这个SASS mixin应该让按钮闪烁:
@mixin background_animation($color) {
-webkit-animation: backgroundAnimation 800ms infinite;
@-webkit-keyframes backgroundAnimation {
0% {background-color: $color;}
50% {background-color: red;}
100% {background-color: $color;}
}
}
我正在使用它:
@include background_animation(#000000);
然而,它不起作用。按钮的背景颜色不会闪烁。
有人能告诉我这里缺少什么吗?
P.S。当不将它作为mixin包含时,代码可以正常工作。
生成的CSS如下所示:
-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.800000011920929s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: backgroundAnimation;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
... other rules omitted for brevity
答案 0 :(得分:2)
编译后SASS没有产生预期的结果。这就是你得到的错误:
.box {
-webkit-animation: backgroundAnimation 800ms infinite;
}
@-webkit-keyframes backgroundAnimation {
.box 0% {
background-color: black;
}
.box 50% {
background-color: red;
}
.box 100% {
background-color: black;
}
}
用法:
.box {
@include background_animation(#000000);
}
基本上你不需要关键帧的.box选择器。
以下是working DEMO(Chrome)
<强>更新强>
你在这里采取了一些错误的做法。请尝试使用此代码段:
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
/*
Other browser prefixes here
@-moz-keyframes $animation-name {
@content;
}*/
}
@mixin animation($str) {
-webkit-animation: #{$str};
}
@include keyframes(background_animation) {
0% {background-color: red;}
50% {background-color: green;}
100% {background-color: blue;}
}
div {
@include animation('background_animation 800ms infinite');
}
它应编译为:
@-webkit-keyframes background_animation {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
/*
Other browser prefixes here
@-moz-keyframes $animation-name {
@content;
}*/
div {
-webkit-animation: background_animation 800ms infinite;
}