【问题标题】：Css animation across an Arc [duplicate]跨弧的CSS动画[重复]
【发布时间】：2013-09-25 14:07:15
【问题描述】：

当前的 CSS3 是否可以沿 this 弧线为对象 (DIV) 设置动画？

【问题讨论】：

标签： css jquery-animate automatic-ref-counting animate.css

【解决方案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 等）

【讨论】：

【解决方案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);
}

【讨论】：

好的，但我的意思是动画它必须是无限的，我该如何使用它？这是我的尝试jsfiddle.net/J9xgQ
我喜欢支点方式，+1

【解决方案3】：

嗯，在 Arun 的工作的基础上继续 Andrea 的工作......

简化为仅使用 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 中添加了文本以显示它不旋转

【讨论】：

+1，P2P接听！！ :)