Css animation across an Arc

Question

Is it possible with current CSS3 to animate an object (DIV) along an this arc?

Answer 1

I've forked the (very good) @ArunBertil "fulcrum" solution to convert it to CSS3 Animation:

Running Demo

CSS

@keyframes drawArc1 {
    0%   { transform: rotate(180deg);  }
    100% { transform: rotate(0deg);    }
}

@keyframes drawArc2 {
    0%   { transform: rotate(-180deg); }
    100% { transform: rotate(0deg);    }
}

body{
    padding: 150px;    
    background: black;
}

.wrapper {
    width: 300px;
    animation: drawArc1 3s linear infinite;
}

.inner {    
    border-radius: 50%;
    display: inline-block;
    padding: 30px;    
    background: yellowgreen;
    animation: drawArc2 3s linear infinite;
}

HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

Watch it on FireFox... to run it on other browsers, simply put the prefixes (@-webkit-keyframes, etc)