A block with a picture, at a given time, is replaced by a second block with a picture, and so on forever. Is this possible with the help of css and html?

  • Yes, maybe ... - Qwertiy ♦
  • How can you tell me please? - Heroin_HP
  • @Qwertiy correct me if I am mistaken, but it is possible for the webkit, but not for all browsers. - Mr. Brightside
  • @ Mr.Brightside, caniuse.com/#feat=css-animation - this is possible for all browsers except IE9- and full junk (FF4-, Safari 3, Opera 11-). Even in the 12th Opera works. - Qwertiy ♦
  • @Qwertiy Thank you, looked =) Everything is really better than I thought - Mr. Brightside

2 answers 2

html, body, div { height: 100%; width: 100%; margin: 0; } html { overflow: hidden; } body { white-space: nowrap; animation: slides-10 10s steps(10) infinite; } div { display: inline-block; vertical-align: top; white-space: normal; } @keyframes slides-10 { from { transform: translateX(0); } to { transform: translateX(-1000%); } } 
 <div style=background:red> </div><div style=background:green> </div><div style=background:silver> </div><div style=background:blue> </div><div style=background:orange> </div><div style=background:white> </div><div style=background:antiquewhite> </div><div style=background:gray> </div><div style=background:yellow> </div><div style=background:margenta> </div>

    For example:

     @keyframes slide { 0% {left: 0;} 50% {left: 0;} 51% {left: -300px;} 100% {left: -300px;} } /* The element to apply the animation to */ .container { width: 300px; height: 300px; position:relative; overflow:hidden; } .container .container-wrapper{ position:absolute; width:610px; height:300px; left:0px; animation-name: slide; animation-duration: 3s; animation-iteration-count: infinite; } .container .container-wrapper div:first-child { display:inline-block; width: 300px; height: 300px; background: url('http://blogldc.s3.amazonaws.com/wp-content/uploads/2015/07/2015_07_17_LearnCSS.jpg'); } .container .container-wrapper div:last-child{ display:inline-block; width: 300px; height: 300px; background: url('http://cdn.compsmag.com/wp-content/uploads/2015/08/Top-10-best-CSS-development-tools-2015.png'); }

    html:

     <div class = 'container'> <div class = 'container-wrapper'> <div></div> <div></div> </div> </div>

    an example . Concerning animation support in animation support browsers

    • Not cross-browser, it seems. It is necessary to scroll the blocks, but not the background change. - Qwertiy ♦
    • it's about a horizontal block change, not about changing the background of one block. - Heroin_HP
    • Corrected the answer. Now through scrolling and cross-browser. Thank you for your comment! - Mikl