Css анимация через дугового

Question

Можно ли с текущей CSS3 для анимации объекта (DIV) вдоль этой дуги?

Answer 1

Я раздвоенный (очень хорошо) @ArunBertil решение "опорную", чтобы преобразовать его в 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> 

Осторожнее на FireFox ... чтобы запустить его на других браузерах, просто положить префиксы (@-webkit-keyframes и т.д.)

Answer 2

Проверить это

http://dabblet.com/gist/1615901

.wrapper { 
    width: 500px; 
    margin: 300px 0 0; 
    transition: all 1s; 
    transform-origin: 50% 50%; 
} 
.inner { 
    display: inline-block; 
    padding: 1em; 
    transition: transform 1s; 
    background: lime; 
} 
html:hover .wrapper { 
    transform: rotate(180deg); 
} 
html:hover .inner { 
    transform: rotate(-180deg); 
} 

Answer 3

Ну, работая на работе Андреа основе на работе Аруна ...

упрощена, чтобы использовать только 1 DIV и 1 анимация:

@keyframes drawArc { 
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;} 
    100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); } 
} 
@-webkit-keyframes drawArc { 
    0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;} 
    100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); } 
} 


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

.test { 
    width: 30px;  
    border-radius: 50%; 
    display: inline-block; 
    padding: 30px;  
    background: yellowgreen; 
    animation: drawArc 3s linear infinite; 
    -webkit-animation: drawArc 3s linear infinite; 
} 

demo

Добавлена ​​также текст в DIV, чтобы показать, что он не вращается