2

I have created a pie chart that spins using CSS animation.

HTML

<pie class="ten"></pie>

CSS

@-webkit-keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

pie {
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 50%;
    background-color: red;
    margin: 1em;
    -webkit-animation: circle 2s linear infinite;
}

.ten {
    background-image:
        linear-gradient(115deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
    transition: all 500ms;
}

I would like to change the animation-duration that it spins on a 1 second interval. I have used jQuery .css within a setInterval to do this. 

setInterval(function() {
    var watt = Math.random() * 3
    $('.ten').css('animation-duration', watt+'s');
}, 1000);

The problem is, when the css animation duration is being reset, the spinning animation seems to jump backwards before spinning forward.

I would like to know if there is a way I can smoothly transition the animation speed changes, having the motion spin forward continuously at different speed without having these jumps.

Here is the code: https://jsfiddle.net/hexaballs/c3vbvarx/

Any advice or suggestions would be greatly appreciated. Many thanks in advance!

hexaballs
  • 21
  • 1
  • You can check this- http://stackoverflow.com/questions/3273478/webkit-css-animation-issue-persisting-the-end-state-of-the-animation – Sujata Chanda Mar 13 '15 at 07:14
  • Thanks! The problem with this this approach was that the spinning animation gets reset to point 0 everytime the animation duration gets changed. I had to change the entire approach by turning the rotate degree into a variable and changing the speed of incrementing this degree. This gives a smooth animation even with the varying speed change. revised link here: https://jsfiddle.net/hexaballs/qcLng51L/5/ – hexaballs Apr 10 '15 at 08:56

0 Answers0