<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> #mondiv { position: absolute; top: 300; left: 300; width: 400px; height:400px; border: 3px solid #000; } .class1 { background-color:red; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: background-color; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; -o-transition-property: background-color; -o-transition-duration: 1s; -o-transition-timing-function: ease-out; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-out; } .class2{ background-color:black; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: background-color; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; -o-transition-property: background-color; -o-transition-duration: 1s; -o-transition-timing-function: ease-out; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-out; } } </style> <script type="text/javascript" language="JavaScript"> function fct(){ if(document.getElementById('nombre').value==1){ document.getElementById('mondiv').className = "class2"; } else if(document.getElementById('nombre').value==0){ document.getElementById('mondiv').className = "class1"; } } </script> </head> transition CSS3 blabla </html>