如何阻止这个流沙动画出现故障？

Question

  

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

出于某些奇怪的原因，每当我切换其中一个选项（如web / ios / print）时，动画会出现奇怪的故障并且动画会跳过。

但是当我删除代码*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

时

从我的风格它可以正常工作但只是发现我的悬停动画被剪裁。

所以我要问的是如何让动画故障停止？ （只需点击网站上的其中一个过滤器即可看到故障）

进行比较，查看http://designwoop.com/labs/filtered-portfolio/，您可以看到它看起来有多顺畅

我非常挑剔，动画不顺畅的方式困扰着我。

Answer 1

这很容易，因为你已经知道了故障的原因。 流沙是一个插件，因此计算CSS不够聪明。 而且最好不要将box-sizing css用于练习。 我建议拿

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

输出并自行计算宽度和填充以获取figcaption