Animating Append List Items - CSS Animation Practise

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<style>
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

.swing {
  perspective: 300px;
}

.swing li {
  /* opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); */

  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
</style>

<body>
  <ul id="list" class="swing">
    <li class="show">List item</li>
    <li class="show">List item</li>
  </ul>
  <button id="add-to-list">Add a list item</button>
</body>

<script>
  /*
   * Add items to a list - from cssanimation.rocks/list-items/
   */
  document.getElementById('add-to-list').onclick = function () {
    const list = document.getElementById('list');
    const newLI = document.createElement('li');

    newLI.innerHTML = 'A new item';

    list.appendChild(newLI);

    setTimeout(function () {
      newLI.className = newLI.className + " show";
    }, 10);
  }
</script>

</html>
SeonHyungJo / Tip-Note

Animating Append List Items - CSS Animation Practise #43
