SCSS和计算

2023年1月4日 279次阅读

我是scss的新手,正在开发一款新的Gooey装载机.你可以在这里查看我的代码：

http://codepen.io/muuvmuuv/pen/qOWagM?editors=010

我试图修复的错误：在动画延迟中,我想减去0.425多个$i for循环所以它无论如何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

最佳答案 问题不在于动画延迟,而是你没有在动画的球上设置动画定时功能.

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

您还有1个太多的步骤导致它比想要的更晚重置.

CodePen Example

> Animation Timing Function MDN

点赞