CSS3 Drawing Line

<style>Div{Border:1px solid;}Div. Line{width:2px;Height:2px;Background-color:Red;Color:Red;Border-radius:2px;}#container{width:800px;Height:600px;position:relative;}#div1{-webkit-animation:AAA 4s;-webkit-animation-iteration-count:Infinite;}#div2{position:Absolute; Left:500px;-webkit-animation:bbb 4s;-webkit-animation-direction:Normal;    /*Normal (each starting from the positive direction) Animation-direction:reverse (each from the opposite direction) animation-direction:alternate (reciprocal)*/-webkit-animation-iteration-count:Infinite;}#div3{position:Absolute;Top:500px;-webkit-animation:CCC 4s;-webkit-animation-iteration-count:Infinite;}#div4{position:Absolute; Left:0;-webkit-animation:ddd 4s;-webkit-animation-direction:Normal;-webkit-animation-iteration-count:Infinite;}@-webkit-keyframes AAA{0% {width:2px;    }25%,100%{width:500px;    }}@-webkit-keyframes BBB{0% {}25%{Height:2px;    }50%,100%{Height:500px;    }}@-webkit-keyframes CCC{50% {width:2px; Left:500px;    }75%,100%{width:500px; Left:0;    }}@-webkit-keyframes DDD{75% {Height:2px;Top:498px;    }100%{Height:500px;Top:0px;    }}</style>11111111<BR>22222222222<BR>33333333333<BR><DivID= "Container">    <DivID= "Div1"class= "line">    </Div>    <DivID= "Div2"class= "line"></Div>    <DivID= "Div3"class= "line"></Div>    <DivID= "Div4"class= "line"></Div></Div>

CSS3 Drawing Line