CSS3 and time:animate sliding information panels

8th September 2010

For IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari, Chrome, Flock and SeaMonkey

Paul Cézanne

(1839-1906)

painting

The French painter who exhibited little in his lifetime and pursued his interests increasingly in artistic isolation, is regarded today as one of the great forerunners of modern painting.

Henri Matisse

(1869-1954)

painting

Initially planned a career as a lawyer. However, he began to paint after an acute attack of appendicitis and then proceeded to become a leader in many art circles.

William Turner

(1775-1851)

painting

This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light.

copyright © stu nicholls - CSS play

Information

Just when you think that you have seen it all along comes another little know feature of Internet Explorer, 'time animation'. With this you have a little control over the animation of various element styles and in this demo I have used this method to animate the slide down/up of the information panels in the same way that transitions are used in CSS3.

So if you have IE5.5, IE6, IE7, IE8, Safari, Chrome or Opera you will see the panels slide down and up when hovering the top blue bar. Firefox users will have to wait until the release of v4 before thay see this smooth slide action.


Copyright

Because of all the time and effort spent in producing this demonstration
I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
    A donation to the 'Support CSSplay' fund would be appreciated.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page