Javascript 如何在jQuery和SASS中创建一个轻轻闪烁的按钮？

在我的Rails应用程序中，我有时必须使某些按钮闪烁/跳动

这些按钮颜色各异。有些是红色的，有些是绿色的，还有一些是蓝色的

这是我的jQuery：

setInterval(function(){
  $('a.flashing').toggleClass('blink');
}, 1000);

这是我的CSS（实际上是SASS）：

这很有效

但是，我不希望所有按钮都以红色闪烁

相反，为了使这种效果对眼睛更柔和一些，每个按钮应该在其原始颜色的稍深阴影中闪烁（如您所知，可能会有所不同）

如何用尽可能少的代码实现这一点，理想情况下根本没有jQuery插件

---

谢谢您的帮助。

尝试添加CSS3过渡效果，这样您就不需要跳转了<代码>.normal是默认颜色

 .normal {
      background-color:rgba(250,20,10,1);
      transition: all .5s ease;
    }

.blink {
      background-color:rgba(250,20,10,.2);
      transition: all .5s ease;
    }

这是一个SASS（+指南针）函数，用于创建脉动效果。脉冲数可通过$count指定

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content

  @-moz-keyframes #{$name}
    @content

  @-ms-keyframes #{$name}
    @content

  @keyframes #{$name}
    @content

=animation-name($name)
  -webkit-animation-name: $name
  -moz-animation-name: $name
  -o-animation-name: $name
  animation-name: $name

=animation-duration($duration)
  -webkit-animation-duration: $duration
  -moz-animation-duration: $duration
  -o-animation-duration: $duration
  animation-duration: $duration

=animation-timing-function($timing-function)
  -webkit-animation-timing-function: $timing-function
  -moz-animation-timing-function: $timing-function
  -o-animation-timing-function: $timing-function
  animation-timing-function: $timing-function

=animation-iteration-count($iteration-count)
  -webkit-animation-iteration-count: $iteration-count
  -moz-animation-iteration-count: $iteration-count
  -o-animation-iteration-count: $iteration-count
  animation-iteration-count: $iteration-count

=animation-direction($direction)
  -webkit-animation-direction: $direction
  -moz-animation-direction: $direction
  -o-animation-direction: $direction
  animation-direction: $direction

// define keyframes
+keyframes(change_background_color)
  to
    background-color: $some_color

// define the mixin
=pulsate($time:0.2s, $count:8)
  +animation-name(change_background_color)
  +animation-duration($time)
  +animation-iteration-count($count)
  +animation-direction(alternate)
  +animation-timing-function(ease-in-out)

// use the mixin in a class
.pulsate-8times
  +pulsate(1s, 16)

不需要JS（除了切换类）。将$count设置为“无限”，以实现无休止的脉动

JSFIDLE与已编译的CSS：

更新：在SCSS中相同（感谢；-）：

---

尝试使用jQuery设置背景颜色的动画

HTML:

<div id="div1" class="normal" >some text</div>

---

由于无法改变颜色，因此会影响不同类型的按钮，为什么不影响亮度（或饱和度），不幸的是，只适用于CSS3。闪烁{filter:brightness（1.2）}谢谢！这就是我最后要做的：

过滤器：亮度（1.1）

。很有魅力，谢谢！我现在正在尝试将其转换为我的语法（实际上是

scss

而不是

sass

）。好的，谢谢。这很有效。即使我最终得到了eithed的解决方案（因为它非常简单），我还是会将你的答案标记为正确答案，因为我从中学到了很多。谢谢，但老实说，我无法实现这一点。事实上，我一整天都在玩

关键帧

等游戏，在某个时候我放弃了，因为我无法让它在我的应用程序中使用大量不同的颜色。谢谢，但这不适合我，因为颜色值是硬编码的，我需要它更灵活。

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }

    @-moz-keyframes #{$name} {
        @content;
    }

    @-ms-keyframes #{$name} {
        @content;
    }

    @keyframes #{$name} {
        @content;
    }
}

@mixin animation-name($name) {
  -webkit-animation-name: $name;
     -moz-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;
}

@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;
}

@mixin animation-timing-function($timing-function) {
  -webkit-animation-timing-function: $timing-function;
     -moz-animation-timing-function: $timing-function;
       -o-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;
}

@mixin animation-iteration-count($iteration-count) {
  -webkit-animation-iteration-count: $iteration-count;
     -moz-animation-iteration-count: $iteration-count;
       -o-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;
}

@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
     -moz-animation-direction: $direction;
       -o-animation-direction: $direction;
          animation-direction: $direction;
}

@include keyframes(change_background_color) {
  to {
    background-color: $some_color;
  }
}

@mixin pulsate($time: 0.2s, $count: 8) {
  @include animation-name(change_background_color);
  @include animation-duration($time);
  @include animation-iteration-count($count);
  @include animation-direction(alternate);
  @include animation-timing-function(ease-in-out);
}

.pulsate-8times {
  @include pulsate(1s, 16);
}

<div id="div1" class="normal" >some text</div>

setTimeout(function(){
    $("#div1").animate({backgroundColor: '#dd6666'}, 500);
}, 1000);