Why do text-decoration changes not appear in my css animation?
-
26-10-2019 - |
سؤال
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>
المحلول
... but the underline never appears. Why ?
Because text-decoration
is not in the list of animatable css properties.
لا تنتمي إلى StackOverflow