Drawing animated arc with pure CSS

Question

I know it is possible to draw and animate arcs in svg and canvas. However, is it possible in css?

I have created an arc using the following method:

.         


        

Answer 1

As Per Chris B's suggestion on the original question, the answer is to contain the arc in another div and then animate the width of the container:

http://jsfiddle.net/AZb3X/

CSS:

body{
    background:orange;    
}

.arc{
    width:150px;
    height:400px;
    border-radius:50%;
    border-right:1px solid black;
    border-left:1px solid black;
    border-top:1px solid black;
    border-bottom:1px solid white;
    float:left;
}

.hider{
    width:0px;
    overflow:hidden;    
    -webkit-animation:unhide 12s;
}

@-webkit-keyframes unhide{
    100%{width:400px}
}    

HTML: