Multiple backgrounds with CSS animations

Question

I'm using multiple backgrounds in CSS (one being a kind of corporate background, and the other is a member of staff).

This is my code :

background: url("../../images/andy.png"),url("../../images/background.png") no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

This works fine, but I want to animate and do other CSS options specifically to the first background parameter (url("../../images/andy.png")).

Is there any possible way to reference that? It's not it's own element so how could it be possible?

Here is my HTML

<section id="intro" class="main style1 dark fullscreen">
    <div class="content container 100% 12u(mobile)">
        <header>
            <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div>
        </header>
        <div style="width:40%;margin-right:auto;margin-left:auto;">
            <p style="width:100%; margin-right:0; margin-left:0;"><i>“sometext”.</i></p>
        </div>
        <footer>
            <a href="#work" class="button style2 down">More</a>
        </footer>
    </div>
</section>

Answer 1

Firstly:

Your JSFiddle was a little over-complicated and animations were on wrong elements etc.

I'd removed unnecessary elements in the HTML for clarity.

Here is an updated JSFiddle that shows your desired effect https://jsfiddle.net/6nstfftn/4/

Read up on CSS Animations!:

I would highly recommend looking into CSS animations. There's a guy I follow on YouTube and he's super-awesome. He has some great tutorials - well worth a watch.

Find him at : https://www.youtube.com/devtipsfordesigners

He's done a series very recently with some videos on CSS transition/animation/effects etc. Check it out.

---

Steps to take:

1. Make your #index element's position: relative;
2. Add pseudo-elements for :before and :after, setting their position: absolute; and their top, bottom, left and right to 0 (basically making them fill the width and height of their "parent" element). Make sure to set the content: '', otherwise they will have no size!
3. Then, for the pseudo-elements, set the background-image, and set the z-index to layer them properly - you can have them in whatever order you like
4. Set the "default" style for each "background" - so, if you want it to start at 0 opacity (to fade in), do that; likewise if you want it to move, move it to the "start" position: TL;DR - you may end up seeing the elements appear and flash before the animation has started if you set them to the "end" position - also, if the attribute is not defined in the CSS, the animation might not know what it was to begin with
5. Create the animations using @keyframes animationName, using from and to to set the starting and ending properties of the animation
6. Apply the transition attribute to each of the "backgrounds" to allow smoothness
7. Apply the animation attribute to each of the backgrounds, setting the name of each @keyframes to use. Set a duration, and use forwards to keep the end-state of the animation
8. Sit back and enjoy a rewarding hot beverage

---

Here's a snippet of the CSS:

#intro {
  position: relative;
}

#intro:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("http://i65.tinypic.com/2woc2o5.png") no-repeat top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -2;
  transition: all 0.5s ease-in-out;
  animation: background 0.5s forwards;
  opacity: 0;
}

#intro:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("http://i65.tinypic.com/2mn0w8j.png") no-repeat top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
  transition: all 0.5s ease-in-out;
  animation: andy 1s forwards;
  transform: translateX(-100%);
}

@keyframes andy{
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}

@keyframes background {
  from { opacity: 0; }
  to { opacity: 1; }
}

In my example I've not included the vendor-specific extensions for transition, animation, transform etc. Obviously, you can add these under your own steam for compatibility.

---

I would highly recommend looking into CSS Animations to get the desired effect.

There are literally hundreds (if not thousands) of them out there.

Any questions, just ask!

Hope this helps :)

Answer 2

The easiest solution would be to add the background.png in the :after or :before pseudo element, ale change the stuff member with this approach How do I change the background image using jQuery animation?

I don't think there is a way to change only one bg via css. You would have to add/change both.

Answer 3

You can do like this,

.my-class:before{
     background: url("../../images/andy.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    /* Do the Animation for this Background image*/
}
.my-class:after{
     url("../../images/background.png") no-repeat top;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    /* Do the Animation for this Background image*/
}

Here is HTML

<section id="intro" class="main style1 dark fullscreen">
    <div class="content container 100% 12u(mobile)">
        <header>
            <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div>
        </header>
        <div style="width:40%;margin-right:auto;margin-left:auto;">
            <p style="width:100%; margin-right:0; margin-left:0;">
                <i>“sometext”.</i>
            </p>
        </div>
        <footer>
            <a href="#work" class="button style2 down">More</a>
        </footer>
    </div>
</section>