Why doesnt transition work in created element(JS DOM,CSS)?

Question

If you click on "some text" in example, the element is created and than it should move 100px up with transition. I am not able to do it with js DOM or css class switch. I miss something, but I am not able to find out belly of the beast. Maybe typo? Or some principle?

other types of solution are also welcome..

thank you!

var ul = document.getElementById('timeline');

ul.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    let star = document.createElement("div");
    star.className = "star";

    e.target.insertBefore(star, e.target.getElementsByTagName("time")[0]);
    star.style.transform = "translateY(-100px)";
    star.style.transition = "all 2s linear";
  }
});

.wrap-timeline {
  position: relative;
  left: 100px;
}

.wrap-timeline ul {
  list-style-type: none;
}

.wrap-timeline ul li {
  margin: 100px 50px;
}

.wrap-timeline ul li time {
  position: absolute;
  left: -100px;
}

.wrap-timeline ul li .star {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 20px;
  z-index: 2;
  background-color: blue;
}

time::before {
  content: "";
  background-color: red;
  width: 65px;
  height: 35px;
  position: absolute;
  left: 100px;
  top: -10px;
  z-index: 3;
}

<div class="wrap-timeline">

  <ul id="timeline">
    <li><time datetime="XXXX-XX">xxxx</time> some text</li>
  </ul>
</div>