css - 为什么我的 css 动画中没有出现文本装饰更改？

Question

我想在 HTML 中模拟一个控制台 UI，我需要在文本下方有一个闪烁的下划线。我的方法是将类设置为具有动画的 underblink。颜色循环，文本隐藏和取消隐藏，但下划线永远不会出现。为什么？

CSS:

  @-webkit-keyframes underblink {
    0%     { text-decoration: none;opacity: 0:color :orange }
    50%    { text-decoration: none;opacity: 0;color:green }
    50.01% { text-decoration: underline;opacity: 1 } 
    100%   { text-decoration: underline;opacity: 1 }
  }

  .underblink {
    -webkit-animation: underblink 0.7s infinite linear alternate;
    -webkit-font-smoothing: antialiased;
    display:inline-block;
  }

HTML:

<div id='always_sort_recursively' class='underblink'>x</div>

Answer 1

... but the underline never appears. Why ?

因为 text-decoration 不在 list of animatable css properties 中.