0
有没有办法让动画填充运行平稳?圆形动画css3和jquery
由此我的意思是说,每秒它都会在20点到40点之间发声,但是你会看到它填满了毫米的毫米,而不是像现在这样跳跃?因为过渡长度作为参数放置了多长时间并不重要,它看起来像是通过跳跃来填充,这不是一个平滑的填充。
这是小提琴
.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 0.2s;
@shadow: 6px 6px 10px rgba(0,0,0,0.2);
margin: 50px;
width: @circle-size;
height: @circle-size;
background-color: @circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: @circle-size;
height: @circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: @shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform @transition-length;
transition: -ms-transform @transition-length;
transition: transform @transition-length;
}
.mask {
clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
.fill {
clip: rect(0px, @circle-size/2, @circle-size, 0px);
background-color: @circle-color;
}
}
}
.inset {
width: @inset-size;
height: @inset-size;
position: absolute;
margin-left: (@circle-size - @inset-size)/2;
margin-top: (@circle-size - @inset-size)/2;
background-color: @inset-color;
border-radius: 50%;
box-shadow: @shadow;
}
}
http://jsfiddle.net/32Y8U/523/
感谢