In my Rails app I will sometimes have to make certain buttons flash / pulsate.

These buttons vary in color. Some are red, others are green, and others again are blue.

This is my jQuery:

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

And this is my CSS (SASS actually):

.blink {
  background-color: red;
}

This works.

However, I don't want all buttons to flash in red.

Instead, to make this effect a bit more gentle on the eyes, each button should flash in a slightly darker shade of its original color (which as you know may vary).

How can this be achieved with as little code as possible and ideally no jQuery plugins at all?

Thanks for any help.

In my Rails app I will sometimes have to make certain buttons flash / pulsate.

These buttons vary in color. Some are red, others are green, and others again are blue.

This is my jQuery:

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

And this is my CSS (SASS actually):

.blink {
  background-color: red;
}

This works.

However, I don't want all buttons to flash in red.

Instead, to make this effect a bit more gentle on the eyes, each button should flash in a slightly darker shade of its original color (which as you know may vary).

How can this be achieved with as little code as possible and ideally no jQuery plugins at all?

Thanks for any help.

• javascript
• jquery
• jquery-ui
• sass

• 1 As you can't alter the color, due to this affecting different types of buttons, why not affect the brightness (or saturation)? developer.mozilla/en-US/docs/Web/CSS/filter, unfortunately only for CSS3 .blink { filter: brightness(1.2) } – eithed Commented Oct 23, 2013 at 16:57
• Thanks! This is actually what I ended up doing: filter: brightness(1.1). Works like a charm. – Tintin81 Commented Oct 23, 2013 at 17:23

3 Answers 3

This is a SASS (+ Compass) function creating a pulsate effect. The number of pulsations can be specified via $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)

No need for JS (except for toggling the class). Set $count to 'infinite' for an endless pulsation.

JSFiddle with the piled CSS: http://jsfiddle/3L2yA/

Update: same in SCSS (thanks to http://sasstoscss./ ;-):

@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);
}

Try adding a CSS3 transition effect, then you don't need to jump through and JS hoops. .normal is the default color.

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

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

try animating the background color using jQuery

HTML:

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

JavaScript

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

demo