Shaky CSS Animation - css

Question

I've made a pie timer animation using only HTML/CSS. You can see it here:
https://jsfiddle.net/yisusans/why2wy5q/
.timer-container {
background: -webkit-linear-gradient(left, #677291 50%, #D8DAE5 50%);
border-radius: 100%;
height: 30px;
position: relative;
top: 5px;
left: 9px;
width: 30px;
-webkit-animation: time 20s linear 1;
animation: time 20s linear 1;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-moz-transform: translateZ(1) scale(1.0, 1.0);
-ms-transform: translateZ(1) scale(1.0, 1.0);
-o-transform: translateZ(1) scale(1.0, 1.0);
-webkit-transform: translateZ(1) scale(1.0, 1.0);
transform: translateZ(1) scale(1.0, 1.0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.timer {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
-webkit-animation: mask 20s linear 1;
-webkit-transform-origin: 100% 50%;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#-webkit-keyframes time {
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes mask {
0% {
background: #D8DAE5;
-webkit-transform: rotate(0deg);
}
50% {
background: #D8DAE5;
-webkit-transform: rotate(-180deg);
}
50.01% {
background: #677291;
-webkit-transform: rotate(0deg);
}
100% {
background: #677291;
-webkit-transform: rotate(-180deg);
}
}
#keyframes time {
100% {
transform: rotate(360deg);
}
}
#keyframes mask {
0% {
background: #D8DAE5;
transform: rotate(0deg);
}
50% {
background: #D8DAE5;
transform: rotate(-180deg);
}
50.01% {
background: #677291;
transform: rotate(0deg);
}
100% {
background: #677291;
transform: rotate(-180deg);
}
}
<div class='timer-container'>
<div class='timer'></div>
</div>
It works but it's a bit shaky. Any tips to smooth out the animation would be amazing.
Thanks!

Answer 1

It's running very smoothly on my MacBook Pro in Safari, Chrome and Firefox, but CSS animations are subject to performance differences between devices and browsers. You might just be seeing the limitations of your device.
It's also likely to run more smoothly outside of jsfiddle.

Answer 2

I came across this post:
Improving CSS3 transition performance
It's been pretty informative in relation to animation performance. But I'd love to see if anyone else has any other insights.

Answer 3

firstly,
good job...
secondly,
It seems I am 4 years late for this answer. but, here goes...
Like #dave suggested in the above post... I also failed to recreate the shakiness issue you have with the animation. (even increasing the height and width property of the .timer-container selector and taking a closer look) It's running pretty smooth. And there seems to be nothing wrong with the code snippet you have provided.
But I will leave this answer for people who want a quick fix for common CSS animation shakiness that they might experience.
set
backface-visibility: hidden;
on the element, you are animating.
and only change opacity and transform property when animating.
Browsers are optimized for animating these properties and will ensure that you minimize any performance overhead.
Pretty much any animation you want can be achieved using transforms.