Sass CSS环形动画开发求助：环初始粗扩展变细、外圈从内圈外起始问题

实现一款兼具大爆炸、黑洞、心跳效果的单色调动画，流程为先爆炸扩张、再向内收缩，最后进入无限心跳脉动循环，这是个人开发的CSS动画项目。

开发进度 #

• 爆炸阶段（已完成一半）
  • 需实现无滚动条的超屏扩张效果
  • 初始为中心带小孔的实心内圈向外扩大
  • 外圈从内圈的外侧开始扩张
  • 环初始较粗，随扩张逐渐变细
• 收缩阶段（已完成）
  • 收缩速度快
  • 动画带“回弹”效果
• 心跳循环阶段（待开发）
  • 脉动从中心向外快速连续扩散
  • 心跳效果为两次脉动后停顿一次

求助说明 #

本人数学基础较差，刚接触Sass和编程，不要求他人直接完成项目，仅想了解其他开发者的实现思路，主要求助当前卡住的两个问题。

现有代码 #

Sass代码 #

body
    background-color: black
    margin: 0

/* Get it all in the center */
.container
    display: flex
    width: 100vw
    height: 100vh
    align-items: center
    justify-content: center
    vertical-align: 50%

/* Here's the animation for the first inner circle. It's outside of the loop because it doesn't follow the same pattern */
.donut
    display: inline-block
    position: fixed
    border-radius: 50%
    visibility: hidden
    transform: scale(50%)

@keyframes donut_1
        0%
            transform: scale(0%)
        0.01%
            transform: scale(4em)
        95%
            transform: scale(150%)
        100%
            transform: scale(40%)
            visibility: visible

.donut:nth-child(1)
    border: 2.75em solid #eee
    width: 1em
    height: 1em
    animation: donut_1 6.6s cubic-bezier(.23,.74,.74,1.2) 0.8s 1 forwards

/* Setting up the variables: */

/* b = border width */
/* s = size (width and height of the circle) */
/* d = amount of donuts */
/* ti = animation timing */
/* de = delay start */

$b: 2
$s: 7
$d: 24
$ti: 4
$de: 4.3
$c: 10

@for $i from 2 through $d
    @keyframes donut_#{$i}
        0%
            transform: scale(0%)
        .01%
            transform: scale(10%) 
            /* this is my effort to start animating from outside of the inner circle this doesn't seem to work... */
            border: #{$b * 2}em solid #eee
            /* my botched effort to start with fat rings */
        80%
            transform: scale(120%)
            visibility: visible
            border: #{$b}em solid #eee
            /* then to have them thin out as they expand */
        100%
            transform: scale(40%)
            visibility: visible

@for $i from 2 through $d
    .donut:nth-child(#{$i})
        animation: donut_#{$i} #{$ti}s cubic-bezier(.24,.79,.46,1.46) #{$de}s 1 forwards
        border: #{$b}em solid #eee
        width: #{$s}em
        height: #{$s}em
        $b: $b - 0.1
        $s: $s + 5
        $de: $de - .18
        $ti: $ti + .2

HTML代码 #

<body>
  <div class="container">
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
  </div>
</body>

当前卡点 #

1. 无法让外圈从内圈外侧的固定位置开始扩张，现有代码注释部分为失败尝试
2. 不会计算实现环初始较粗、随扩张逐渐变细的效果，目前表现为初始偏粗，扩大后再变细，已知和缩放扩张逻辑有关但调试两天仍未解决

内容的提问来源于stack exchange，提问作者aroni