wypełnij animację za pomocą CSS lub Javascript

Question

Jul 19, 2013, 02:22 PM

css javascript

wypełnij animację za pomocą CSS lub Javascript

Zastanawiałem się tylko, czy można utworzyć animację wypełnienia za pomocą CSS lub javascript?

zasadniczo chcę stworzyć animację wypełnienia, taką jak ta pokazana na poniższym obrazku:

http://i40.tinypic.com/eit6ia.png

czerwony jest wypełnieniem, a czarny jest pusty.

To jest mój kod, który Jeff opublikował dla obrazów, ale z jakiegoś powodu nie działa! czy czegoś brakuje?

<!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>Untitled Document</title>
<style type="text/css">
#black{
    position:absolute;
    z-index:2;
    color:black;
    font-weight:bold;
    font-size:2em;
    width:768px;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
}
</style>

<script language="javascript">
var red = document.getElementById('red');

red.style.width = "0px";
red.style.height = "1024px";
var animation = setInterval(function(){

    if(parseInt(red.style.width,10) == 768)
        clearInterval(animation);
    red.style.width = parseInt(red.style.width,10)+2 +"px";
},10);
</script>


</head>

<body>
<div><img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg"/><img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg"/></div>
</body>
</html>