SCSS和计算

Question

我是新来的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

Answer 1

的问题是不是由于动画延迟，而是你没有设置animation-timing-function球被动画。

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

也有1个这是导致它后重置比想太多步骤。

CodePen Example

• Animation Timing Function MDN