在IE11中使用CSS动画化SVG路径

Question

背景

我正在研究Symon风格的游戏，当计算机生成随机序列时，用户必须按正确的顺序点击元素。

元素由SVG路径构成。

我希望在游戏中拥有PENDING状态，其中一个元素反复闪烁以吸引用户互动

我正在研究IE11

问题

我似乎无法让路径为闪烁的颜色设置动画。我对css动画不是很有经验，但看起来我已经做好了一切，我用了很多不同的例子来编写这段代码。它忽略了类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行的active课程中删除game_tri时，是否有人能说出游戏停止工作的原因。

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

        reset_game();
    });

按下“下一轮”按钮时，无论如何都会重新插入该类，但如果最初删除该类，则游戏不会响应。我不明白为什么。

Answer 1

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