SCSS and calculation

Question

I am new to scss and am working on a new Gooey bootloader. You can view my code here: http://codepen.io/muuvmuuv/pen/qOWagM?editors=010

The error I'm trying to fix: in the animation delay, I want to subtract 0.425 a few $ i for loops, so anyway 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);
  }
}

I hope someone can help me or finish my project faster than me, but I appreciate the tips. In the end, it should look like this: http://www.materialup.com/posts/spinner-loader-gooey-light-effect

Answer 1

The problem is not related to the delay in the animation, but you did not set it animation-timing-functionon the animated ball.

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

, reset , .

CodePen

• MDN