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