Changing Background Image With Css3 Animations

Change background-image with CSS animation

When animating in CSS, you need to animate between two similar values.

For example, this will work:

max-height: 0px;
and
max-height: 100px;

and this will not:

max-height: none; and max-height: 100px;

However, for performance reasons, it's advisable to use opacity and transform properties when animating in CSS

.cover-gradient {
  height: 100vh;
  width: 100vw;
  opacity: 0;
  animation: fadeMe 0.3s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}

@keyframes fadeMe {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://jsfiddle.net/hellogareth/j3ytzq52/22

Can we change background image with CSS3 Animation

If you want a smooth transition between the two states, you can use opacity and a pseudo element to display an other background-image and color on hover :

DEMO

HTML :

<section id="indsection"></section>

CSS :

#indsection {
    position:relative;
    width: 1024px;
    background-image: url(http://fc06.deviantart.net/fs70/f/2014/237/2/9/indexartbg1_by_aortafx-d7wnc11.png);
    float: left;
    height: 600px;
    background-position: left top;
    background-repeat: no-repeat;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(51, 51, 51, .4);
    border-right-color: rgba(51, 51, 51, .4);
    border-bottom-color: rgba(51, 51, 51, .3);
    border-left-color: rgba(51, 51, 51, .4);
}
#indsection:before{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background-color: rgba(153, 0, 51, .8);
    background-image: url(http://fc05.deviantart.net/fs71/f/2014/237/d/a/indexartbg2_by_aortafx-d7wnc0w.png);
    opacity:0;

    -webkit-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
#indsection:hover:before {
    opacity:1;
}

How can I animate Background Image of body wth css

As far as I know you can't add animation to background image. You have to simulate the way background image works and then add the animation to that image. I used CSS positioning to accomplish this. I didn't add your animations completely but you can add it as you like.

CSS:

body {
  color: white;
  font-family: 'Open Sans', sans-serif !important;
}
#bg-image {
  position: fixed;

  top: 0;
  right: 0;

  width: 100%;
  height: auto;

  z-index: -10;

  animation-name: kenburns-top;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

and the body tag will be like:

<body>
<img
  id="bg-image"
  src="https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
/>

<h1>Web Page</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eligendi
  cupiditate non? Voluptas, in, deserunt quis expedita, laudantium suscipit
  ab sint amet quia dolorum illum saepe. Placeat libero enim dicta!
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium iure
  veritatis eligendi ipsa ad suscipit, quo illum ut rem incidunt eos rerum
  iusto repellendus voluptatibus saepe veniam ullam, quod vel?
</p>
</body>

How to change background image on click with animation using jquery and css

You can do this with the transition style rule, for example: transition: all .6s ease-in

$('#i1').on({  'click': function() {    $('#change-image').css("background-image", "url(http://placekitten.com/1500/1500)");  }});
$('#i2').on({  'click': function() {    $('#change-image').css("background-image", "url(http://placekitten.com/1200/1200)");
  }});
$('#i3').on({  'click': function() {    $('#change-image').css("background-image", "url(http://placekitten.com/1400/1400)");  }});
$('#i4').on({  'click': function() {    $('#change-image').css("background-image", "url(http://placekitten.com/1000/1000)");  }});

#change-image{   background: url(http://placekitten.com/500/500) center/cover;   height: 300px;   width: 300px;   transition: all .6s ease-in;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="i1">Click Me 1</button><button id="i2">Click Me 2</button><button id="i3">Click Me 3</button><button id="i4">Click Me 4</button>
<div id="change-image"></div>

Trigger animation on background url change

You should create a class that only handles the animation and then

remove the animation class
trigger reflow
add the animation class

var images = [  'http://dummyimage.com/500x500/ff000/ffffff?text=1',  'http://dummyimage.com/500x500/00ff00/ffffff?text=2']
function renderCurrentSlide() {  var slide = document.getElementById('slide');  slide.classList.remove('filter-animation');  slide.style.background = "url('" + images[0] + "') no-repeat top center fixed";  void slide.offsetWidth;  slide.classList.add('filter-animation');}
//for demo onlyrenderCurrentSlide();images.shift();setTimeout(renderCurrentSlide, 10000);

.slide {  width: 100%;  height: 100%;  position: fixed;  filter: grayscale(100%);}
.filter-animation {  animation: filter-animation 8s forwards;  -webkit-animation: filter-animation 8s forwards;}
@keyframes filter-animation {  0% {    filter: grayscale(100%);  }  100% {    filter: grayscale(0%);  }}

<div id="slider-container">  <div class="slider-main">    <div id="gallery">      <ul class="images">        <li class="slide" id="slide"></li>      </ul>    </div>    <div class="caption-and-title-holder">      <div id="image-title"></div>      <div id="image-caption"></div>    </div>  </div></div>

Create dynamically changing background images with animation

You can use CSS animation.

img#bg1 {  min-height: 100%;  min-width: 100%;  width: 100%;  height: auto;  position: fixed;  top: 0;  left: 0;  animation: background1 60s ease 0s infinite;}img#bg2 {  min-height: 100%;  min-width: 100%;  width: 100%;  height: auto;  position: fixed;  top: 0;  left: 0;  animation: background2 60s ease 0s infinite;  margin-left: -100%;}img#bg3 {  min-height: 100%;  min-width: 100%;  width: 100%;  height: auto;  position: fixed;  top: 0;  left: 0;  animation: background3 60s ease 0s infinite;  margin-left: -100%;}img#bg4 {  min-height: 100%;  min-width: 100%;  width: 100%;  height: auto;  position: fixed;  top: 0;  left: 0;  animation: background4 60s ease 0s infinite;  margin-left: -100%;}@keyframes background1 {  0% { margin-left: -0%; }  20% { margin-left: -0%; }  25% { margin-left: 100%; }  26% { margin-left: -100%; }  95% { margin-left: -100%; z-index: 1; }  100% { margin-left: -0%; z-index: 1; }}@keyframes background2 {  0% { margin-left: -100%; }  20% { margin-left: -100%; }  25% { margin-left: -0%; }  45% { margin-left: -0%; }  50% { margin-left: 100%; }  100% { margin-left: -0%; }}@keyframes background3 {  0% { margin-left: -100%; }  45% { margin-left: -100%; }  50% { margin-left: -0%; }  70% { margin-left: -0%; }  75% { margin-left: 100%; }  100% { margin-left: -0%; }}@keyframes background4 {  0% { margin-left: -100%; }  70% { margin-left: -100%; }  75% { margin-left: -0%; }  95% { margin-left: -0%; }  100% { margin-left: 100%; }}

<img id="bg1" src="http://download-wallpaper.net/images/nature-background/nature-background-24.jpg"><img id="bg2" src="http://wallpapercave.com/wp/pwQMS6f.jpg"><img id="bg3" src="http://all4desktop.com/data_images/original/4236532-background-images.jpg"><img id="bg4" src="http://wallpaper-gallery.net/images/background-desktop-wallpaper-hd/background-desktop-wallpaper-hd-9.jpg">