在 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 行的 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 动画。