background animation

animate background image or color by css and jquery

by Ali Naderi

HTML

<!-- we are going to create a div and animate it's background image , color or .... -->
click on the Image:
<div class="test">
</div>

<!-- reset button -->
<button>
  reset
</button>


<br/>
<br/> *Tip:Images are loaded from lorempixel.com , if you clicked and saw a blank image , the problem is from image source.
<br/> when you use your own images , there won't be such problems.

CSS

.test {
  background-image: url(http://lorempixel.com/400/200);
  width: 200px;
  height: 200px;
  /* we set transition to 'all' properies - but you can use it just for background image either */
  transition: linear all 1s;
  /* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time , so there won't be any problems */
  -webkit-transition-delay: 1s;
  /* Safari */
  transition-delay: 1s;
}

JavaScript

$('.test').click(function() {
  //you can use all properties : background-color  - background-image .....
  $(this).css({
    'background-image': 'url(http://lorempixel.com/400/200)'
  });
});

// this is for reseting the background-image
$('button').click(function() {
  $('.test').css({
    'background-image': 'url(http://lorempixel.com/g/400/200)'
  });
});

// I used this to smoothly fade in and out images on an image gallery. it's because you can't animate background-image properties in animate function unless you use opacity or background-position.