纯html + css的动画图标

如果这是在不正确的社区,我道歉,我找不到更合适的.

随着用户体验设计的推动,创建交互式图标,在状态之间平滑动画,我想知道在性能,兼容性和自定义方面是否有比基于SVG的图形更好的Web解决方案.

我有一个想法,使用样式化的HTML元素和CSS过渡重新创建一些这些图标.通过定义图标的起点和终点,我们可以自定义它的许多属性,例如颜色,圆度,过渡缓和和延迟,以使用单个代码库创建非常自定义的动画.由于它使用纯CSS属性而不是JavaScript来计算帧,因此它应该比SVG图形更有效地使用硬件.

查看我制作的示例,它提供了一个用户界面来更改每个部件的颜色,圆度,旋转和不透明度(用于调试).它显示各种尺寸的图标.

基本上,在悬停时,我们将属性应用于每个单独的栏:

.menu:hover .bar-1 {
    width: 0.5em;
    left: 0;
    top: 0.125em;
    transform: rotate(-45deg);
}

我从这种方法中看到了一些缺点.

IE8和Opera Mini ......甚至IE9也没有进行转换,但它至少有转换所以它将是一个非动画图标.IE8可以用一些hacky过滤器修复,并确保使用宽度或相对定位而不是变换,但这会使代码膨胀一些.
HTML代码中会有额外的标记.我希望未来会出现一些解决方案(类似于Shadow DOM),这有助于缓解这一问题.一些图标可以纯粹用一个元素和伪元素制作,但我不想将所有图标限制为3个.
很难让所有图标在小尺寸上看起来很好.我不确定这与使用小尺寸的SVG图形相比如何,但我认为原生元素看起来会更糟,因为这不是它们的主要目的.我的例子中的图标确实看起来很好,但是在16px下.

这些缺点和我错过的任何其他缺点都超过积极因素吗？