By animating the relative position of the <header> element, we can apply an effect whereby the header slowly drops into place upon page load. This will degrade gracefully, as those who are using older browsers simply won't see the effect.
By animating the relative position of the <header> element, we can apply an effect whereby the header slowly drops into place upon page load. This will degrade gracefully, as those who are using older browsers simply won't see the effect.
For the 'colour-change' logo, we take a PNG image with a transparent shape knocked out, and animate the background colour.
Here we have used CSS animations together with the 'border' property to create a 'loading' spinner. You could use Modernizr to replace the spinner with a GIF in older browsers, or just leave it as a static icon.
By playing around with CSS3 animations and properties such as 'box-shadow', we can make buttons (or indeed any other element) display a cool pulsating-glow effect, which will degrade gracefully in older browsers.
The relative position of the box has also been animated to create a 'shakey' effect for when the form is incorrectly filled-in or a password is incorrect. Click on the ‘submit’ button to reload the page and watch the animation play.