我正在玩CSS动画SVG元素，并遇到的问题，即使所有技术，使用，一些浏览器支持组合不是，即CSS动画DIVs工作，但SVG元素不。我想知道是否有办法检测浏览器是否能够使用SVG动画CSS元素。
Here is a jsFiddle举了一个例子。它适用于最新版本的Chrome，Firefox和Safari。但是用例如打开它时Firefox 5只有div旋转而rect没有。
您可以添加一个事件监听器来检查动画迭代的完成情况，并在相应的事件处理程序中设置一个像supportsSVGKeyFramedAnimatedProps = true这样的标志（如果迭代从未完成，那么它不是动画）。
elem.addEventListener('animationiteration', eventHandler, false)
这将允许您“向前”到您的SVG动画，而不是提供后备。
我想知道是否有办法检测浏览器是否能够使用CSS动画SVG元素
简单回答：是的，你可以按照@jhpratt的说法。
您可以检测浏览器是否仅支持CSS的CSS功能。 @supports CSS at-rule允许您指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。这称为特征查询。
例：
@supports (display: flex) {
div {
display: flex;
}
}
@supports not (display: flex) {
div {
float: right;
}
}
MDN链接：https://developer.mozilla.org/de/docs/Web/CSS/@supports
答案很长：
你将永远有一些cross-browser问题。您遇到的问题是困扰每个Web开发人员。仍然有办法解决这个浏览器支持问题：
1.您可以检查“我可以使用”兼容性：
链接：http://caniuse.com/建议查找任何有问题的功能，如动画。
2.在工作流程中使用自动修复器：
在autoprefixer的帮助下，你不必担心大部分时间都会使用带有-moz-，-webkit-等前缀的CSS。这个小帮手可以帮到你，你甚至可以告诉一些autoprefixers您想要支持哪些浏览器。
3.用户第三方 - 聚会图书馆：
有许多库可用于检测浏览器和版本。如果您想确保您的动画可以安全使用，您可以简单地使用库中提供的动画，当然也可以在各自的网站上查看兼容性。
一些大牌：
还有更多，只需搜索万维网。
4.使用CSS Hacks检测特定的浏览器：
可以使用所谓的CSS-Hacks。它们是特定的CSS调用，仅适用于某些浏览器。
一些例子：
Internet Explorer/Edge 8 only: @media \0screen {}
firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {}
Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}
你可以在这里查找更多Browserhacks：http://browserhacks.com/
结论：
可以检测特定的浏览器，但是不可能检测brwoser是否仅使用CSS支持给定的功能。这就是为什么在浏览器支持下你总会遇到困难的原因。
希望这可以帮助。问候
我相信现代化的SMIL动画检测应该这样做。 https://modernizr.com/download?smil-setclasses
我在一组相当复杂的css / SVG图表动画中使用它。只需在以下标记中包含一个后备：
.no-smil{ }
我还没有完全找到你正在寻找的东西，但是类似的东西（提供了一个动画的剪辑路径，当浏览器支持它时由SVG定义，而当它没有时则返回）。您可以使用查找像素比率的媒体查询来确定broswer是moz还是webkit，并在媒体查询之外提供回退动画，并在媒体查询中提供首选动画，以指示将支持它的浏览器。
//fallback animation here
@media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
至于旧版本的Firefox？我不知道如何在CSS中做到这一点，但我不确定回过头几个版本的Firefox或Chrome是一个常见的用例。