SCSS 和计算

Question

我是 scss 的新手，正在开发一个新的 Gooey 加载器。你可以在这里查看我的代码： http://codepen.io/muuvmuuv/pen/qOWagM?editors=010

我试图修复的错误：在动画延迟中，我想 减去 0.425 多个 $i for loop 所以它的 无论如何都是 X.0s .

@for $i from 1 through $numOfBalls {
  &:nth-child(#{$i}) {
     transform: rotate(360deg/$numOfBalls * $i) translate3d(0,$transY,0); 
     animation-delay: (3.4s / $numOfBalls) * $i - (0.425s * $i);
  }
}

希望有人可以帮助我或比我更快地完成我的项目，但我感谢提示。 最后它应该是这样的： http://www.materialup.com/posts/spinner-loader-gooey-light-effect

Answer 1

问题不是由于动画延迟，而是您没有在正在动画的球上设置animation-timing-function。

animation-timing-function: ease-in-out;

您还有 1 个过多的步骤，导致它比预期的更晚重置。

CodePen Example

• Animation Timing Function MDN