使这个CSS3动画旋转只旋转一次

我试图动画从0度旋转到任何程度，我想它结束（让我们说300度，无所谓）的饼图。有一个底层的圆圈，其中一个在顶部旋转。就像现在这样，饼图旋转360度，然后以最终度数位置结束（本例中为300）。目前它只能在Chrome中使用。使这个CSS3动画旋转只旋转一次

JSFiddle

我的HTML：

<div class="spinner"> 
    <span><em></em></span> 
    <span><em></em></span> 
</div>

我的CSS：

.spinner { 
    width: 250px; 
    height: 250px; 
    background: #aaa; 
    margin: 0 auto; 
    position: relative; 
} 
.spinner:after { 
    position: absolute; 
    content: ""; 
    width: 0%; 
    height: 0%; 
    border-radius: 100%; 
    background: #fff; 
    top: 10%; 
    left: 10%; 
} 
.spinner span em { 
    background: #0e728e; 
    -webkit-animation-duration: 6s; 
} 
@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
} 
.spinner { 
    border-radius: 100%; 
    position: relative; 
} 
.spinner span { 
    width: 50%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
} 
.spinner span:first-child { 
    left: 0; 
} 
.spinner span:last-child { 
    left: 50%; 
} 
.spinner span em { 
    border-radius: 250px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
} 
.spinner span:first-child em { 
    left: 100%; 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    -webkit-animation-name: rotate-lt; 
    -webkit-transform-origin: 0 50%; 
} 
.spinner span:last-child em { 
    left: -100%; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    -webkit-animation-name: rotate-rt; 
    -webkit-transform-origin: 100% 50%; 
}

来源

2013-08-30 itsclarke

好的动画，我想知道答案也。 –

我也是...很喜欢它.. –

这有点棘手，因为这里真的有两个圆圈旋转。实际上，你想要一个（旋转-RT）中途停止，而其他（旋转-LT）继续余下的120度（300度总）：

@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
}

http://jsfiddle.net/BkJY7/7/

编辑：澄清，如果你想这个旋转小于180度，你会删除第二个动画关键帧规则：http://jsfiddle.net/BkJY7/8/

来源

2013-08-30 04:29:38 skyline3000

我爱你！你完全被邀请参加我的生日派对！我会继续为所有未来的人更新我的代码。为了让人放心，是否有理由将'50％'从'rotate-rt'中删除，而不是将其改为'180deg'？除了减少编码外，就是。 – itsclarke

这是唯一的原因。我删除了那些不需要保持时间/速度相同的那些。 – skyline3000

您正在寻找-webkit-animation-fill-mode: forwards;其在年底停止动画。你可以在这里阅读更多关于它：Can't stop animation at end of one cycle

来源

2013-08-30 01:27:59

谢谢，这有助于停止在最后，现在我只需要弄清楚如何摆脱额外的旋转... – itsclarke

使这个CSS3动画旋转只旋转一次

回答

相关问题