如何为 CSS 渐变停止点设置动画并平滑过渡到透明？

Question

我有下面的代码。如何平滑地过渡渐变停止点？它只是突然从一种转变为另一种。

我的大多数渐变动画示例似乎都使用渐变位置，但我相信更改渐变停止点也应该是可能的。

.test {
    display: inline-block;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background: conic-gradient(red, red);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: auto;
    -webkit-mask:radial-gradient(circle, transparent 50%, white calc(50% + 1px));

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

@keyframes rotate {
    0% {
        background-image: conic-gradient(red, red);
    }

    30% {
        background-image: conic-gradient(red 70%, transparent);
    }

    70% {
        background-image: conic-gradient(red 30%, transparent, transparent, transparent);
    }

    100% {
        background-image: conic-gradient(red, transparent);
    }
}

<div class="test"></div>

Answer 1

截至 2020 年 12 月 3 日，此功能仅适用于 Chrome 或 Edge 95+

可以使用 CSS 来制作渐变动画@property。

@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: 200px;
    height: 200px;
    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;
}

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

    85% {
        --opacity: 100%;
    }
}

<div class="test"></div>