Why do text-decoration changes not appear in my css animation?

Question

I want to emulate a console UI in HTML and I need to have a underscore blinking under text. My approach is to put the class to underblink which has an animation. The colors cycle, the text hides and unhides, but the underline never appears. Why ?

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 ?

Because text-decoration is not in the list of animatable css properties.