Fade In / Out Images - CSS3 / SSI[an error occurred while processing this directive]

CSS3 - Transitions & Animations

top image
top image

Most modern browsers are incorporating various properties of the proposed CSS3 standards, but as currently implemented, they require the vendor prefix, e.g. -moz- (Firefox/SeaMonkey), -ms- (MicroSoft Internet Explorer), -o- (Opera) or -webkit- (Chrome/Safari) browsers.

In the case of the image to the right; it can be faded in and out to reveal a background image behind when the cursor is hovered over it. The styles required are:-

#xFade img {
   -webkit-transition:opacity 1s ease-in-out;
   -moz-transition:opacity 1s ease-in-out;
   -ms-transition:opacity 1s ease-in-out;
   -o-transition:opacity 1s ease-in-out;
   transition:opacity 1s ease-in-out;
   }
#xFade img:hover {
   opacity:0;
   }

Likewise, the bottom image will fade in and out over a period and as many times as you require, when using the animation property, e.g.

@-webkit-keyframes xFade {
    0%, 25% {opacity:1}
   75%, 100% {opacity:0}
   }
/* plus the -moz-, -ms- and -o- styles */
@keyframes xFade {
    0%, 25% {opacity:1}
   75%, 100% {opacity:0}
   }
#xFade-2 img {
   -webkit-animation: /* include values */;
   -moz-animation: /* ditto */;
   -ms-animation: /* ditto */;
   -o-animation: /* ditto */;
   animation: xFade ease-in-out 6s infinite alternate;
   }

All this extra code can become rather tedious, so here is a solution that doesn't use JavaScript but makes use of Apache - Server Side Includes which is available on the Rootsweb / Ancestry servers.  It involves detecting the users browser type and allocating the appropriate vendor prefix to the properties first line, thereby removing the need for 75% of the prefixed styles.

NOTE: Its not necessary to use an .shtml file extension when using SSI on the Rootsweb / Ancestry servers.  Those servers have been configured to parse all .html or .htm files for SSI directives.

The SSI Script

This little vendor prefix detector script can be used universally to detect the browser type and apply its vendor styles prefix to any nominated CSS property.  It is very simple; there is no requirement to detect browser versions or operating systems, as all we need to know is the basic browser being detected.  For instance, the Gecko platform based SeaMonkey browser is using essentially the same engine as Firefox, and though it has SeaMonkey in its User Agent string, it also includes Firefox.  The same goes for variations of the Webkit engine used by the Chrome and Safari browsers.

   <!--#set var="uA" value="$HTTP_USER_AGENT" -->
   <!--#if expr="($uA=/MSIE/)" -->
   <!--#set var="pre" value="-ms-" -->
   <!--#elif expr="($uA=/Firefox/)" -->
   <!--#set var="pre" value="-moz-" -->
   <!--#elif expr="($uA=/Chrome/)||($uA=/Safari/)" -->
   <!--#set var="pre" value="-webkit-" -->
   <!--#elif expr="($uA=/Opera/)" -->
   <!--#set var="pre" value="-o-" -->
   <!--#endif -->

Briefly, the Server parses the script and detects the User Agent of the browser making the page request, then checks the #if or #elif expressions to see if the User Agent string matches.  When it does, it loads the associated #set value into the variable "pre".  The #echo command is then replaced by the #set value where appropriate in the styles.

Copy & paste the script into the <head> section of your page following the <title> tag, and add the <!--#echo var="pre" --> command where required in your styles.

The variable "pre" holds the vendor prefix, and as an example, the xFade img transition property in your stylesheet should be as follows:-

xFade img {
   <!--#echo var="pre" -->transition:opacity 1s ease-in-out;
   transition:opacity 1s ease-in-out;
   }

Used as above, the CSS3 'transition' property will be parsed and rendered using the vendor prefix if still required or by using the standard property if the browser is able to do so.

A simplified page for the "Hover to fade in & out" example, using both the above images is available here.  As the SSI script will not be visible when checking the source code, I have also saved the page as a text file which you will be able to download and view in your text editor.  There is also a separate page showing the animation format for the "auto fade of an image" here, and its associated text file.

Change the .txt extension to .html and you will be able to view either of these files in your default browser.  Remember the SSI script is only parsed by the Server, which means that should your browser not recognise the standard transition property, the "Hover to fade in & out" image will change instantly when your cursor moves on and off it, rather than the 1 sec ease-in-out provided by the transition property.  Likewise nothing will happen with the "auto fade" image which should be faded in and out by the animation property.

TIP: The easiest way of implementing the multiple vendor prefixes, is to design and work with your page using the vendor prefix of your default browser, e.g.

-moz-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;

When ready to place the page on the server, ensure the SSI vendor detector script is placed in the head of the page as previously described.  Then use your text editor to Find & Replace all instances of -moz- with <!--#echo var="pre" --> so the above styles are now:-

<!--#echo var="pre" -->transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;

It is expected that when Internet Explorer 10 is released (26 October 2012) that it will be available on the Windows 8 Operating System.  It is hoped that in mid November 2012 an IE10 beta preview release will be made for the Windows 7 O/S, with the final version being released in February 2013.  Meanwhile, all current versions of Chrome, Firefox, Safari and Opera on Windows O/S; Chrome, Firefox and Opera on Linux/Ubuntu O/S; Safari on Macintosh O/S, render the transition and animation properties. Opera does have some rendering bugs with the animation property, and they are aware of them.

Update - 15 December 2012 : The expectations regarding IE10 mentioned in the above paragraph have all been fulfilled.

Further reading:-

Animations - Mozilla

Keyframes - Mozilla

Transitions - Mozilla

Server Side Includes - Lorrie Laskey

Server Side Includes - SSI - Developer

- 16 December 2012 -