How do I make two images fade in/out repeatedly? [closed]

by

CSS Animation

  • Wrap both images in a block element that has: position:relative

  • Set both images to position:absolute

  • Make 2 @keyframes and animation: 10s infinite alternate

  • Assign a @keyframe animation to each image.

  • The 2 properties being animated is opacity and z-index (z-index is only on 2 frames because there’s only 2 states really lower or higher than another positioned element).

Demo

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}
<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class="B">




  <img src="https://pockey.io/assets/howtoplay.gif" class="A">
</figure>

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  3. How to silently hide “Image not found” icon when src source image is not found
  4. Disable dragging an image from an HTML page
  5. How do I abort image load requests without using window.stop()
  6. Sort by image resolution in gallery
  7. Center an Image vertically and horizontally using CSS
  8. canvas- Cropping images in different shapes
  9. jQuery append function is just appending the html but not the classes related to it
  10. Clearing using jQuery
  11. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  12. How to connect HTML Divs with Lines? [duplicate]
  13. HTML – attributes vs properties [duplicate]
  14. Get the DOM path of the clicked
  15. Can javascript access iframe elements from the parent page?
  16. How to localize a simple HTML website page in my case?
  17. Prevent iOS bounce without disabling scroll ability
  18. jQuery Popup Bubble/Tooltip [closed]
  19. How do I make a div full screen?
  20. How to replace numbers in body to Persian numbers?
  21. How to call parent window function from child window jquery?
  22. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  23. jquery .ready and height of element
  24. Auto-Scroll to next anchor at Mouse-wheel
  25. Using JSONP to get JSON data from another server
  26. Jquery script works in JSfiddle but not on html page
  27. jQuery when element becomes visible [duplicate]
  28. How do I get natural dimensions of an image using JavaScript or jQuery?
  29. Difference between jQuery’s .hide() and setting CSS to display: none
  30. Parsing returned HTML from jQuery AJAX request

Leave a Comment