如何使用平滑过渡到透明的动画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>

- user5507535

---

这回答您的问题吗？如何使用CSS3渐变背景实现过渡效果。 - Mahozad

Answer 1

截至2020年12月03日，此功能仅适用于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>

- user5507535

Answer 2

在这种情况下，您可以像下面这样动画化背景颜色层：

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

    animation:
        rotate
        4.5s
        ease-out
        0s
        infinite
        none
        running;
}
@keyframes rotate {
    100% {
        background-color:blue;
    }
}

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

更新

这里有另一个结合透明度和渐变动画的想法（有点小故障，但会尝试优化它）。

.test {
  display: inline-block;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: conic-gradient(red 70%, transparent);
  animation: grad1 3s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 50%, white calc(50% + 1px));
  position: relative;
}

.test::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: conic-gradient(red, red);
  animation: 
    op 1s   linear infinite,
    grad 3s linear infinite;
}

@keyframes op {
  100% {
    opacity: 0;
  }
}

@keyframes grad {
  0%,
  33.32% {
    background: conic-gradient(red, red);
  }
  33.328%,
  66.65% {
    background: conic-gradient(red 70%, transparent);
  }
  66.658%,
  100% {
    background: conic-gradient(red 30%, transparent);
  }
}

@keyframes grad1 {
  0%,
  33.32% {
    background: conic-gradient(red 70%, transparent);
  }
  33.328%,
  66.65% {
    background: conic-gradient(red 30%, transparent);
  }
  66.658%,
  100% {
    background: conic-gradient(red, transparent);
  }
}

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

- Temani Afif

---

这个方法是有效的，但不适用于我的特定情况，因为它是一个向透明过渡的方法。我已经编辑了问题，对此感到抱歉。 - user5507535

@user5507535 把蓝色替换成透明的？ - Temani Afif

当然，更改颜色是可以的，但我如何从30%变为70%呢？ 我正在尝试一些选项。 - user5507535

@user5507535 好的，我会考虑另一个想法。 - Temani Afif

@user5507535 提出了另一个想法，虽然不是完美的，但会努力改进。 - Temani Afif