Question

如果这是在错误的社区，我道歉，我找不到更合适的。

随着UX设计的推出，创建可在各州之间平滑制作动画的交互式图标，我想知道在性能，兼容性和自定义方面是否有比基于SVG的图形更好的Web解决方案。

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

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

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

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

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

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

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