Question

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

The MDN documentation说flexbox order可以作为一个整数进行动画制作，但是当我检查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问题，浏览器怪癖或缺乏支持，是否未应用？

编辑：

JSFiddle演示：

https://jsfiddle.net/7ubd0y33/

CSS3动画无法更改flexbox'顺序'吗？

0 个答案: