javascript - Use animation load bar with JS -

edit: see answer below.

while waiting settimeout runout, thought idea add animation.

css:

.ws_addbutton {border:1px black solid;border-radius:28px;} .msg[data-status=topublish] .ws_addbutton {background-color:lightcoral;} .msg[data-status=published] .ws_addbutton {background-color:#7892c2; cursor:default;}  @keyframes loas_bg {   {background: linear-gradient(to right, initial 0%, transparent 100%);}   {background: linear-gradient(to right, initial 0%, transparent 0%);} } 

*i used initial because don't know first color (blue or red)

and js trigger (need run once):

selectmsg.getelementsbyclassname('ws_addbutton')[0].style.animation = 'loas_bg '+ws_set_delay_basic+'s linear'; 

but dosen't work (the animation dosen't start)), , don't sure why. tried find information in google , here, without luck.

<s>any idea how solve it?</s>

edit: see answer below.

after little more homework tried this:

var ws_set_delay_basic = 5;  window.getcomputedstyle(document.queryselector('#ws_addbutton'), ':before').style.animation = 'mymove '+ws_set_delay_basic+'s';

div {    width: 100px;    height: 100px;    background: red;    position: relative;  }    div:before {    content: "";    display: block;    position: absolute;    top: 0;    left: 0;    width: 0;    height: 100%;    background: gray;    opacity: 0.5;    /* animation: mymove 5s; */  }    @keyframes mymove {    { width: 0; }    { width: 100%; }  }

<div id="ws_addbutton"></div>

as see, tried select pseudo-element, without success. without js, can add animation directly (=pseudo-element), not have dynamic time.

how can add animation pseudo-element correctly?