html - How do i stop this quicksand animation from glitching?

Question

http://trulyamped.com/test/art.html

For some weird reason whenever i toggle one of the options such as web/ios/print the animation does a weird glitch and the animation skips.

but when i delete the codes *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

from my style it works properly but only to find that my hover animation is clipped.

So what i am asking is how do i get the animation glitch to stop? (just click on one of the filters on the site to see the glitch)

for comparisons look at http://designwoop.com/labs/filtered-portfolio/ and you can see how smooth it looks

i am really nit picky and the way the animation is not smooth bothers me.

Answer 1

这很容易，因为您已经知道导致故障的原因。流沙是一个插件，所以计算css不够聪明。而且最好不要在练习中应用 box-sizing css。我建议采取

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

自己计算宽度和填充以进行 figcaption