Trying to make multiple background images cycle through a slideshow with CSS and JQUERY

Question

I\'ve placed three background images in a div. I\'m trying to make all three of them cycle through on a timer that fades in and out. I\'ve actually found similar quesitons o

Answer 1

From the answer here and suggestion from @guest271314 try defining CSS 3 key frames for animation:

#slideshow{
       position:relative;
       top:0;
       width:100%;
       height:635px;
       background:
       url("car4.jpg"),
       url("city.jpg"),
       url("host3.jpg");
       background-repeat:no-repeat;
       background-size:100%;
       -moz-animation: swim 2s linear 0s infinite;
       -webkit-animation: swim 2s linear 0s infinite;
        animation: swim 2s linear 0s infinite;
}


@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}