Shaky CSS Animation

Question

I've made a pie timer animation using only HTML/CSS. You can see it here:

.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!

score 0 · Answer 1 · answered Dec 22 '16 at 16:46

0

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.

answered Dec 22 '16 at 16:46

dave

2,762
1
16
32

Interesting...I have it running on my computer and it's pretty shaky. It's shaky even when I'm running it locally. I only put it on jsfiddle to share for stackoverflow. – ssyi Dec 22 '16 at 17:00

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

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.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 22 '16 at 17:13

ssyi

31
3

score 0 · Answer 3 · answered Jan 18 '21 at 15:23

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.

Shaky CSS Animation

3 Answers3