Ух ты
megaupload,
смотри как можно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
<style>
@-webkit-keyframes open {
from {
background-image:url(http://s60.radikal.ru/i170/1304/bc/9b0397a202e9.png);
}
to {
background-image: url(http://s017.radikal.ru/i401/1304/7a/b7f2e56b1b82.png);
}
}
.open_animation {
-webkit-animation: open 2s;
}
.second {
background-image: url(http://s017.radikal.ru/i401/1304/7a/b7f2e56b1b82.png);
background-repeat: no-repeat;
width: 100px;
height: 65px;
}
.first {
background-image:url(http://s60.radikal.ru/i170/1304/bc/9b0397a202e9.png);
background-repeat:no-repeat;
width: 100px;
height: 65px;
}
</style>
<div class='first' id='test'></div>
<input type='button' value='Показать' />
<script>
function changeClass(elem, class1, class2) {
elem.className = elem.className.replace(class1, class2);
}
document.getElementsByTagName('input')[0].addEventListener('click', function () {
document.getElementById('test').className += ' open_animation';
setTimeout(function () {
document.getElementById('test').className = document.getElementById('test').className.replace(" open_animation", "");
changeClass(document.getElementById('test'), "first", "second");
}, 2000)
}, false)
</script>
</body>
</html>