纯 CSS 中的加载器动画

Question

我尝试编写受此 dribbble 启发的加载器动画：https://dribbble.com/shots/14420202-Processing-Animation 在评论部分我发现codepen具有类似的动画，但它都是用JS制作的：https://codepen.io/AbubakerSaeed/full/yLaQVdq

tl2
  .set(".dC-1", { rotate: 0 })
  .set(".dC-2", { rotate: 30 })
  .set(".dC-3", { rotate: 60 })
  .set(".dC-4", { rotate: 90 })
  .set(".dC-5", { rotate: 120 })
  .set(".dC-6", { rotate: 150 })
  .set(".dC-7", { rotate: 180 })
  .set(".dC-8", { rotate: 210 })
  .set(".dC-9", { rotate: 240 })
  .set(".dC-10", { rotate: 270 })
  .set(".dC-11", { rotate: 300 })
  .set(".dC-12", { rotate: 330 })
  .to(".dC-1", {
  delay: s,
  duration: s,
    rotate: 30,
})

我尝试用它制作纯 CSS 动画，但我不明白该怎么做。谁能帮我解释一下如何在 SCSS 中制作这两个时间线，如何将 JS 代码翻译成 SCSS？

Answer 1

您可以通过跟踪 2 个动画来做到这一点：

• 带有进出移动块的旋转平面
• 在静态平面上显示/隐藏 div。

您可以同步动画并在不同平面上显示/隐藏不应显示的块。

例如： 如果 1 次旋转需要 5 秒， 总动画为 10 秒。 其中 5 秒是不可见的，另外 5 秒是可见的。

在下面的 sn-p 中，我用 2 个块做了一个示例。 您可以根据需要将其扩展为任意数量的块。 我让方块在不可见时稍微可见，只是为了显示动画中发生的情况。

body {
  background-color: #1f2227;
}

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid white;
  padding: 20px;
  transform: rotate(-90deg)
}

.spinner,
.static {
  position: absolute;
  left: 50%;
  top: 50%;
}

.spinner {
  animation: 5s linear infinite spin;
}

.block {
  width: 10px;
  height: 10px;
  background-color: #EEE;
  display: inline-block;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}

.static .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite hide-1;
}

.static .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite hide-2;
}

.static .b3 {
  transform: rotate(60deg) translateX(100px);
}

.spinner .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-1;
}

.spinner .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-2;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes go-in-out-1 {
  0% {
    transform: translateX(100px);
    opacity: 1;
  }
  4%,
  50% {
    transform: translateX(0px);
    opacity: 1;
  }
  54% {
    transform: translateX(100px);
    opacity: 1;
  }
  54.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes go-in-out-2 {
  4% {
    transform: translateX(100px);
    opacity: 1;
  }
  8%,
  46% {
    transform: translateX(10px);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  50.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes hide-1 {
  0% {
    opacity: .1;
  }
  4%,
  50% {
    opacity: .1;
  }
  50.1%,
  100% {
    opacity: 1;
  }
}

@keyframes hide-2 {
  4% {
    opacity: .1;
  }
  8%,
  54% {
    opacity: .1;
  }
  54.1%,
  100% {
    opacity: 1;
  }
}

<div class="wrapper">
  <div class="static">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
    <div class="block b3"> </div>
  </div>
  <div class="spinner">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
  </div>
</div>

Answer 2

非常感谢拉斯。我正在开发 12 块，但动画很疯狂。也许我计算的时间或百分比有误？

这是我的代码（为了更清楚，在 scss 中）：

.spinner {
  animation: 5s linear infinite spin;
}
    
$rotation: 0deg;
    
    .static {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s ease-in-out infinite hide-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    $rotation: 0deg;
    
    .spinner {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s linear infinite go-in-out-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    $first: 0;
    $second: 4;
    $third: 50;
    $fourth: 54;
    $fifth: 54.1;
    
    @for $i from 1 to 12 {
      @keyframes go-in-out-#{$i} {
        #{$first * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$second * 1%},
        #{$third * 1%} {
          transform: translateX($block-size * ($i - 1));
          opacity: 1;
        }
    
        #{$fourth * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$fifth * 1%},
        100% {
          transform: translateX($loader-size / 2);
          opacity: 0;
        }
      }
    
      $first: $first + 4;
      $second: $second + 4;
      $third: $third - 4;
      $fourth: $fourth - 4;
      $fifth: $fifth - 4;
    }
    
    $first-2: 0;
    $second-2: 4;
    $third-2: 50;
    $fourth-2: 50.1;
    
    @for $i from 1 to 12 {
      @keyframes hide-#{$i} {
        #{$first-2 * 1%} {
          opacity: 0;
        }
    
        #{$second-2 * 1%},
        #{$third-2 * 1%} {
          opacity: 0;
        }
    
        #{$fourth-2 * 1%},
        100% {
          opacity: 1;
        }
      }
    
      $first-2: $first-2 + 4;
      $second-2: $second-2 + 4;
      $third-2: $third-2 + 4;
      $fourth-2: $fourth-2 + 4;
    }