0

I have a CSS animation that has terrible performance if it's size is large, about 800px X 800px or more, the animation can only be run in newest versions of Chrome or Edge.

See example code. If example is not slow enough add more circles or increase the example size.

The real animation is very similar to this one, this is just a simplified example.

I would like to know if there's a way to improve the performance of this animation.

The conic gradient maybe can be simplified but must look the same!

@property --opacity {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.test {
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    background-image: conic-gradient(
        red var(--opacity),
        red 10%,
        rgba(255, 0, 0, var(--opacity)),
        transparent,
        transparent
    );
    will-change: transform, background-image;
    width: 800px;
    height: 800px;
    mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));
    -webkit-mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));

    animation:
        conic-gradient
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

.a {
    position: absolute;
    right: -10%;
    top: 20%;
}

.b {
    position: absolute;
    right: -10%;
    top: 40%;
}

@keyframes conic-gradient {
    50% {
        --opacity: 0%;
    }

    85% {
        --opacity: 100%;
    }
}
<div class="test"></div>
<div class="test a"></div>
<div class="test b"></div>

Is there a way to improve the performance?

user5507535
  • 1,580
  • 1
  • 18
  • 39
  • I would be good to keep only one question about the same thing to have accurate asnwers. Actually you raised 4 question around the same thing which is not very helpful – Temani Afif Dec 03 '20 at 21:14
  • @TemaniAfif This is a different question! I will actually answer my own other question now because I found the answer and used in this new question. – user5507535 Dec 03 '20 at 21:15
  • I know it's different but the purpose is the same. If you keep the same goal in one question it would be more helpful to get accurate answers – Temani Afif Dec 03 '20 at 21:19
  • I had to add quite a few circles to see the problem, but on a fairly beefy laptop the animation was taking anything between 5% and 14% of the cpu. even in the non-jerky state. I guess the system has to go through everything when a CSS variable is changed and maybe it can't invoke the help of the GPU because it doesn't realise it's an opacity that's changed in the animation ?(just surmising here). – A Haworth Dec 04 '20 at 12:46
  • @AHaworth I have an AMD Ryzen Pro 4750U, it's a pretty modern CPU and I can notice the performance degrade. Not only increasing the number of circles, but also de resolution (size) of the animation greatly hurts performance. – user5507535 Dec 04 '20 at 20:40

0 Answers0