<div class="container">
  <h2><a href="https://github.com/christiangh/jquery-highlighter" target="_blank">jquery-highlighter</a> demo</h2>
  <div class="panel panel-default">
    <div class="panel-body context">
      <p><span>Lorem</span> ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        no sea takimata sanctus est <span>Lorem</span> ipsum dolor sit amet. <span>Lorem</span> ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <span>Lorem</span> ipsum dolor sit amet.</p>
    </div>
    <div class="panel-footer">This example is part of the article <a href="http://www.sitepoint.com/10-jquery-text-highlighter-plugins/" target="_blank">10 jQuery Text Highlighter Plugins</a> on <a href="http://sitepoint.com/" target="_blank">SitePoint</a> by <a href="https://github.com/julmot"
        target="_blank">Julian Motz</a>.</div>
  </div>
</div>

/** HIGHLIGHTING ANIMATION **/

.highlighter_go {
  -webkit-animation: highlighting 3000ms ease-in-out forwards;
  -moz-animation: highlighting 3000ms ease-in-out forwards;
  animation: highlighting 3000ms ease-in-out forwards;
  background: transparent;
  background: -webkit-linear-gradient(90deg, transparent 50%, #FFFF00 50%);
  background: -moz-linear-gradient(90deg, transparent 50%, #FFFF00 50%);
  background: -o-linear-gradient(90deg, transparent 50%, #FFFF00 50%);
  background: linear-gradient(90deg, transparent 50%, #FFFF00 50%);
  background-repeat: repeat;
  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  padding: 0 2px;
  margin: 0 -2px;
}

@-webkit-keyframes highlighting {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0;
  }
}

@-moz-keyframes highlighting {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0;
  }
}

@keyframes highlighting {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0;
  }
}


/**
 * The following is not related to the plugin
 */

body {
  background: #fbfcfc;
}

.container {
  max-width: 700px;
}

$(function() {
  var $elements = $(".context span");
  $elements.highlighter({
    "colorTo": "#f1c40f",
    "pauseTime": 200,
    "duration": 800
  });
});