How to make an image transition using CSS?

celebritymusic · March 7th, 2007, 07:37 AM

Hi

I want to make an image in a DIV morph into another (in the same DIV) and then back again every ten or 20 seconds, but I want the transition to be smooth. . I was wondering if there is a simple CSS way of doing this, rather than making an animated gif with stacks of frames?

Cheers

Shaun

sr71000 · March 7th, 2007, 12:06 PM

nope. you'll be needing an animated gif there. sorry

Iturea · March 8th, 2007, 03:39 PM

Quote:

Originally Posted by celebritymusic

Hi

I want to make an image in a DIV morph into another (in the same DIV) and then back again every ten or 20 seconds, but I want the transition to be smooth. . I was wondering if there is a simple CSS way of doing this, rather than making an animated gif with stacks of frames?

Cheers

Shaun

revealTrans filter allows you to transition between images. This should get you started. Adding a timer, etc will give you the effect of the 20
second pause you are looking for. If I had more time I would have
thrown in the timer logic as well.

This may only work in IE. Don't know, don't care... LOL! Copy, paste, make better... GOOD LUCK!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>  
    <title>
      revealTrans
    </title>
      <script type="text/javascript" xml:space="preserve">
       //<![CDATA[
        var transitionName = 
        ["Box In", "Box Out", 
         "Circle In", "Circle Out",
         "Wipe Up", "Wipe Down"];
 
         var counter = 0;
         var whichImage = true;
 
         function blend()
         {
           if (whichImage) {
               image1.filters( "revealTrans" ).apply();
               image1.style.visibility = "hidden";
               image1.filters( "revealTrans" ).play();
             }
             else {
               image2.filters( "revealTrans" ).apply();
               image2.style.visibility = "hidden";
               image2.filters( "revealTrans" ).play();
             }
         }
 
         function reBlend( fromImage )
         {
           counter++;
 
             if (fromImage) {
               image1.style.zIndex -= 2;
               image1.style.visibility = "visible";
               image2.filters( "revealTrans" ).transition = counter % 6;
             }
             else {
               image1.style.zIndex += 2;
               image2.style.visibility = "visible";
               image1.filters( "revealTrans" ).transition = counter % 6;
             }
 
             whichImage = !whichImage;
             blend();
             transitionDisplay.innerHTML = "Transition " + 
             counter % 6 + ": " + transitionName[ counter % 6 ];
         }
       //]]>
      </script>
  </head>
  <body onload="blend();">
    <img id="image2" src="http://images.techimo.com/timo_images/images/logo.gif" 
         style="position: absolute; left: 10px; top: 10px; width: 246px; 
         z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)" 
         onfilterchange="reBlend( false )" alt="" name="image2" /> 
    <img id="image1" src="http://images.resellerratings.com/images/rrlogo1124b.gif" 
         style="position: absolute; left: 10px; top: 10px; width: 246px; 
         z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)" 
         onfilterchange="reBlend( true )" alt="" name="image1" />
    <div id="transitionDisplay" style="position: absolute; top: 70px; left: 80px;">
      Transition 0: Box In
    </div>
  </body>
</html>