CSS3动画是否无法更改flexbox“订单”？

我试图通过延迟的CSS动画来更改flexbox order属性，以便在定时的基础上高亮显示元素

说flexbox顺序可以作为一个整数设置动画，但是当我在chrome的开发者工具中检查正在设置动画的元素时，顺序仍然是2

.side h6 + blockquote ol {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.side h6 + blockquote ol li {
    order:2;
}

.side h6 + blockquote ol li:nth-of-type(1) {
  -webkit-animation: stream_highlight 30s 0s 1 !important;
  -moz-animation:    stream_highlight 30s 0s 1 !important;
  -o-animation:      stream_highlight 30s 0s 1 !important;
  animation:         stream_highlight 30s 0s 1 !important;
}

.side h6 + blockquote ol li:nth-of-type(2) {
  -webkit-animation: stream_highlight 30s 30s 1 !important;
  -moz-animation:    stream_highlight 30s 30s 1 !important;
  -o-animation:      stream_highlight 30s 30s 1 !important;
  animation:         stream_highlight 30s 30s 1 !important;
}

@-webkit-keyframes stream_highlight {
    0%   {
        order:1 !important;
    }
}
@-moz-keyframes stream_highlight {
    0%   {
        order:1 !important;
    }
}
@-o-keyframes stream_highlight {
    0%   {
        order:1 !important;
    }
}
@keyframes stream_highlight {
    0%   {
        order:1 !important;
    }
}

是不是因为我的CSS有问题、浏览器有问题或缺乏支持而没有应用它

编辑：

JSFIDLE演示：

---

因此，在动画中，您希望第二个li出现在第一个li之前？是的，或者说得更清楚：当前正在动画的li的顺序应该是1，而不是默认的顺序2。这里的演示会更有帮助，我认为您必须轻松使用！重要提示。我已经在操作中添加了一个演示。是的，我完全了解！重要-我只是想看看这是否是一个CSS特殊性问题，在动画中没有应用顺序@特里