Question: transition opacity from 0 to 1 is not working. here is my code: <https://jsfiddle.net/ax4aLhjq/19/>

```
//html
<div id="a">
  <div style="height:20px"></div>
</div>

//css
#a{
  width:200px;
  background-color:salmon;
  margin:0px;
  padding:0px;
  height:200px;
  overflow: auto;
}

#a .item{
  margin:0px 5px;
  background-color:teal;
  padding:10px;
  color:white;
  opacity:0;
  transition:opacity .5s ease-in-out;
}

//js
function add(){

  var div = document.createElement("div");
  div.className ="item";
  var newtext = document.createTextNode("aa");
  div.appendChild(newtext);
  document.querySelector("#a").appendChild(div);

  var separator = document.createElement("div");
  separator.style.height="10px";
  document.querySelector("#a").appendChild(separator);

  //apply opacity
  div.style.opacity=1;

}
setInterval(add,3000);

```

Am I doing something wrong?

Answer: 
**Problem:**

You are setting the `opacity`to `1` the same time you were creating the element.

**Solution:**

You have to delay tha action of showing the element, you need to set the opacity within a timeout to make the animation effect otherwise all elements will be just appended.

You can see this snippet I used a `setTimout`to make the effect of the opacity animation:

```js
//js
function add(){

  var div = document.createElement("div");
  div.className ="item";
  var newtext = document.createTextNode("aa");
  div.appendChild(newtext);
  document.querySelector("#a").appendChild(div);

  var separator = document.createElement("div");
  separator.style.height="10px";
  document.querySelector("#a").appendChild(separator);

  //apply opacity
  setTimeout(function(){
      div.style.opacity=1;
  }, 2000);

}
setInterval(add,1000);
```

```css
//css
#a{
  width:200px;
  background-color:salmon;
  margin:0px;
  padding:0px;
  height:200px;
  overflow: auto;
}

#a .item{
  margin:0px 5px;
  background-color:teal;
  padding:10px;
  color:white;
  opacity:0;
  transition:opacity .5s ease-in-out;
}
```

```html
<div id="a">
  <div style="height:20px"></div>
</div>
```
Make a setTimeout like this *window.setTimeout(function(){div.style.opacity=1;},17);*. So the animation will effect next time.