I am currently having a problem with CSS animations. A random background is called from an array, shows up and changes and so on. I applied two animation for the image caption id, a slide in and a delayed slide out. The slide in and out runs well for the first time, but when the second background shows up, the caption just appears to the screen without any animation.

[This is my test page](http://dnradiotest.tumblr.com/) and below is my code.

HTML code:

```
<script type="text/javascript">

function loadRandomImage(imgs) {
    var index = Math.floor(Math.random() * imgs.length);

    console.log("loadRandomImages(): index = "+ index);

    $.backstretch(imgs[index].url, {duration: 30000, fade: 1200});  
    $("#caption").html(imgs[index].caption);
}

var images = new Array(); //array of imgs objects

images[0] = {url: "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption: "Caption0"};
images[1] = {url: "https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg", caption: "Caption1"};
images[2] = {url: "https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif", caption:"Caption2"};
images[3] = {url: "https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif", caption:"Caption3"};

// Preload

setTimeout(loadRandomImage, 1000, images);

// Change images every 3 seconds

setInterval(loadRandomImage, 30000, images);

</script>

<div id="pattern"></div>
<div id="pattern2"></div>

<div id="caption"></div>

```

CSS code:

```
#caption {
    position: relative;
    font: 1.5em Trebuchet, sans-serif;
    text-align: center;
    margin-left: 75%;
    z-index: 56;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px;
    animation: slidein 3s, slideout 3s 27s;
}

#caption:empty
{
    display: none;
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width:100%;
    visibility:hidden;
    opacity: 0; 
  }

  100% {
    margin-left: 75%;
    width:100%;
    opacity: 1;
    visibility:visible;
  }
}

@keyframes slideout {
  0% {
    margin-left: 75%;
    width:100%;
    opacity: 1;
    visibility:visible;
  }

  100% {
    margin-left: 100%;
    width:100%;
    opacity:0;
    visibility:hidden;
  }
}

```