Animated Jpeg?


I've prodced an animated GIF for my website banner but some of the image quallity is distorted.

What I want to do is use the original jpegs and animated them. I have tried

 This css3 but it doesn not work in opera or most versions of IE

<div id="cf">
	<img class="bottom" src="/tests/images/Stones.jpg" />
	<img class="top" src="/tests/images/Summit.jpg" />

Open in new window

@keyframes cf3FadeInOut {
	0% {
	45% {
	55% {
	100% {

#cf3 {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;

Open in new window

Can anyone suggest a cross browser solution to animate 5 jpegs for a website banner?

Who is Participating?
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
If you're going to use jquery, here is one I wrote for a continuous fadein/fadeout effect (I made it into a plugin, but right now the plugin only has a reveal effect :

But there's lots of others out there. jquery cycle is a good one.

For this one, you'll want to adjust the width, height, the names of the images, and the image path.

In the html, just add:

<div class="myslideshow"></div> where you want the slide show to appear.

var sw = 400; // slideshow width
   var sh = 300; // slideshow height
   var slideshow = $(".myslideshow"); // slideshow container element
   var images = ["img1.jpg", 
   var imagePath = "../images/";   
   var speed = 500; // how quickly it fades
   var slideInterval = 2500; // time between slide fades
// no need to edit below this line

   slideshow.css({width: sw, height: sh, "position":"relative", "overflow":"hidden"});
   var numImages = images.length;
   var slides = [];
   // make a slide object
   function Slide(w, h, img){
        var slide = $("<div>", {
                    position : "absolute",
                    width    : w,
                    height   : h,
                    opacity  : 0,
                    background: "url("+imagePath+img+") 0px 0px no-repeat"
            rel: img    
                return slide;
   for(var i = 0; i < numImages; i++){
    slides.push(new Slide(sw, sh, images[i]));
   slides[0].css({opacity : 1});
   var dotheslide = function(){
       slideshow.children("div").first().animate({opacity : 1}, {queue:false});
       slideshow.children("div").last().animate({opacity : 0}, speed, function(){

            slideshow.children("div").first().css({opacity : 1});
   var inter;
   inter = setInterval (function(){
   }, slideInterval);

// this will pause the slide show on mouse hover:
   slideshow.on("mouseenter", function(){
        inter = setInterval (function(){
        }, slideInterval);

Open in new window

Kyle HamiltonData ScientistCommented:
you'll need javascript if you need cross-browserablity

Would you like a javascript solution?
EdAuthor Commented:
yes please- it doesn't have to be css
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

jQuery has some really excellent components for doing this.

I'd just use this :)
Kiran Paul VJComputer EngineerCommented:
Try the code mentioned here, you can give the file names in an array.
EdAuthor Commented:
sorry for the delayed response but I have been ill.

Anyway, back to it now and this solution was perfect, thankyou
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.