This website stores cookies. Click here to accept them.cookie information page

css3 in firefox 5 (Technical)

24th June 2011

Mozilla has launched the latest release of Firefox, version 5, hot on the heels of version 4 due to their new rapid release programme.

One of the new features is support for CSS3 animation, a neater and more efficient way to perform simple animations (based around changing of style) than including libraries of javascript.  Here's a simple colour change animation - where the browser actually works out the colour gradations from red to green and green to blue.  Try it out once you've donwloaded 5.  Or you can add -webkit prefixes (duplicate and amend the -moz prefixes) for trying out on webkit browsers like Safari and Chrome.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1{
-moz-animation-duration: 10s;
-moz-animation-name: wowanimation;
-moz-animation-iteration-count: 1;
}

@-moz-keyframes wowanimation {
from {color:red;}
50% {color: green;}
to {color:blue;}
}
</style>
</head> 
<body>
<h1>wow</h1>
</body>
</html>

see the demo page here


Add your comment for "css3 in firefox 5 (Technical)":

© Alberon Ltd 2017

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).