Почему изменения в текстовом оформлении не отображаются в моей анимации css?

Question

Я хочу подражать пользовательскому интерфейсу консоли в HTML, и мне нужно, чтобы подчеркивание мигало под текстом. Мой подход заключается в том, чтобы помещать класс в мигание, которое имеет анимацию. Цикл цветов, текст скрывается и скрывается, но подчеркивание никогда не появляется. Зачем ?

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

... но никогда не появляется подчеркивание. Зачем ?

Потому что text-decoration нет в list of animatable css properties.