Cross-Fade between images with CSS in loop

by

I have taken your fiddle as a base, and made it work without script.

updated demo

I needed to set an id to the HTML

.fadein img {
    position:absolute;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}
<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

I am setting the keyframes to give aprox 1/3 of the time visible, with apropiate transitions.
Then I set different delays for every image, so that they alternate.
If you want full browser support, you will need more vendor prefixes. I have used -webkit- and bare property so that you get the idea.

More Related Contents:

  1. Passing parameters to css animation
  2. How to have css3 animation to loop forever
  3. CSS3 Fade Effect
  4. How to prevent a CSS keyframe animation from running on page load?
  5. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  6. blur everything but hovered CSS
  7. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  8. CSS3 Transparency + Gradient
  9. See :hover state in Chrome Developer Tools
  10. Disable LESS-CSS Overwriting calc() [duplicate]
  11. Is float for layout bad? What should be used in its place?
  12. Why did Bootstrap 3 switch to box-sizing: border-box?
  13. CSS: fixed position on x-axis but not y?
  14. Gradients in Internet Explorer 9
  15. Defined Edges With CSS3 Filter Blur
  16. WebKit: Blurry text with css scale + translate3d
  17. Extending selectors from within media queries with Sass
  18. How can I add a box-shadow on one side of an element?
  19. Equal height of elements inside grid item with CSS grid layout
  20. margin-top not working with clear: both
  21. Background-size with SVG squished in IE9-10
  22. Selenium WebDriver get text from CSS property “content” on a ::before pseudo element
  23. Detecting IE version using CSS Capability/Feature Detection
  24. Max-Width vs. Min-Width
  25. How do I rotate text in css?
  26. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  27. How can I create multi columns from a single unordered list?
  28. How to prevent different browsers rendering fonts differently?
  29. How do I make text bold in HTML?
  30. CSS shorthand vs longhand?

Leave a Comment