JSFiddle - React, Tailwind, and code Playground

testar

by Salmin Skenderovic

HTML

<ul id="list">
  
</ul>

CSS

#list li {
  opacity: 0;
  transition: all 2s;
}

#list li.visible-item {
  opacity: 1;
  transition: all 1s;
  background-color: white;
}

#list li.visible-item:hover {
  background-color: red;
}

#list li.visible-item:active {
  background-color: blue;
}

JavaScript

const list = document.querySelector("#list");


function Li() {
  const li = document.createElement("li");
  li.textContent = "Hej hej";
  
	return li;
}

setTimeout(() => {
  list.append(new Li());
  list.append(new Li());
  list.append(new Li());
  list.append(new Li());
  list.append(new Li());


  setTimeout(() => {
  const allItems = document.querySelectorAll("#list li").forEach(item => {
      item.classList.add("visible-item");
    });
  }, 0);
  
}, 1000);