.slider { position:relative; } .slide1,.slide2,.slide3,.slide4 { position: absolute; width: 100%; height: 100%; } .slide1 { background: url(../img/6.jpg) no-repeat center; background-size: cover; animation:fade1 30s infinite; -webkit-animation:fade1 30s infinite; } .slide2 { background: url(../img/7.jpg) no-repeat center; background-size: cover; animation:fade2 30s infinite; opacity:0; -webkit-animation:fade2 30s infinite; } .slide3 { background: url(../img/3.jpg) no-repeat center; background-size: cover; animation:fade3 30s infinite; opacity:0; -webkit-animation:fade3 30s infinite; } .slide4 { background: url(../img/5.jpg) no-repeat center; background-size: cover; animation:fade4 30s infinite; opacity:0; -webkit-animation:fade4 30s infinite; } @keyframes fade1 { 0% {opacity:1} 15% {opacity:1} 25% {opacity:0} 90% {opacity:0} 100% {opacity:1} } @keyframes fade2 { 0% {opacity:0} 15% {opacity:0} 25% {opacity:1} 40% {opacity:1} 50% {opacity:0} } @keyframes fade3 { 0% {opacity:0} 40% {opacity:0} 50% {opacity:1} 65% {opacity:1} 75% {opacity:0} } @keyframes fade4 { 0% {opacity:0} 65% {opacity:0} 75% {opacity:1} 90% {opacity:1} 100% {opacity:0} }