在IE11中使用CSS对SVG路径进行动画处理

Question

的背景

我正在开发一款Symon风格的游戏，其中用户必须按正确的顺序单击元素，因为计算机会生成随机序列。

元素由SVG路径组成。

我希望在游戏中处于待处理状态，其中一个元素反复闪烁以吸引用户互动

我正在使用IE11

问题

我似乎无法获得动画闪烁颜色的路径。 我对CSS动画不是很有经验，但是似乎我做对了所有事情，并且我使用了许多不同的示例来编写这段代码。 它忽略了旨在无限动画path元素的pending类。

@-webkit-keyframes flash {
    0% {
        fill: black;
    }
    100% {
        fill: #ff7420;
    }
}

@keyframes flash {
    0% {
        fill: black;
    }
    100% {
        fill: #ff7420;
    }
}

.game_tri.pending path {
    transform:translatey(-100px);
    animation-name: flash;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out; 
}

完整代码：

JSFIDDLE https://jsfiddle.net/tomshanan/oushonob/10/

奖金问题

我很想知道是否有人能告诉我，为什么我从第9行的game_tri类中删除了active ，游戏为什么会停止工作？

$(document).ready(function () {
        $(".game_tri").attr("class", "game_tri active pending");

        reset_game();
    });

当您按Next Round按钮时，无论如何应该重新插入该类，但是如果该类最初被删除，则游戏不会响应。 我不明白为什么。

Answer 1

IE Edge之前的IE不支持应用于SVG元素的CSS动画。