A Pen by Joel.

index.html

<div class="pulse-me">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis nulla ab id harum repellendus quae accusamus facilis sint est incidunt vero a! Maiores quis hic tempore nulla iure ipsa saepe!</div>

<button name="pulse">click me</button>

Pulse-background-color.markdown

Pulse background color

A simple jQuery plugin that uses CSS3 animation to pulse the background color of any element

A Pen by Joel on CodePen.

License.

script.js

// simple pulse plugin
(function($) {

  $.fn.pulse = function(options) {
    options = $.extend({
      delay: 2000
    }, options);
    this.addClass('pulse');
    var that = this;
    setTimeout(function() {
      that.removeClass('pulse');
    }, options.delay);
    return this;
  };
  
})(jQuery);

// on DOM ready
(function($) {

  var pulse = function() {
    $('.pulse-me').pulse();
  }

  $('button[name=pulse]').click(function() {
    pulse();
  });
  pulse();
  
})(jQuery);

style.css

.pulse {
  background-color: #ff0;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 0.67s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.67s;
}

@-webkit-keyframes pulse {
  0% { background-color: #fff; }
  50% { background-color: #ff0; }
  100% { background-color: #fff; }
}