<form id="form" class="form">
  <label for="entering-x">
    <input type="radio" id="entering-x" name="effect" checked/> <span>Entering X</span>
  </label>
  <label for="entering-y">
    <input type="radio" id="entering-y" name="effect"/> <span>Entering Y</span>
  </label>
  <label for="fade">
    <input type="radio" id="fade" name="effect"/> <span>Fade</span>
  </label>
  <label for="scale">
    <input type="radio" id="scale" name="effect"/> <span>Scale</span>
  </label>
</form>
<ul id="list" class="entering-x">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<button id="add" class="btn btn-add">Add</button>
<button id="remove" class="btn btn-remove">Remove</button>

body {
  background-color: #444;
  font-family: sans-serif;
}

ul {
  margin: 0;
  padding: 20px;
  list-style-type: none;
}

ul li {
  position: relative;
  z-index: 10;
  padding: 20px 15px;
  background-color: #333;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.75);
}

ul li.new,
ul li.remove {
  z-index: 0;
  max-height: 0;
}

ul li + li { margin-top: 10px; }

@keyframes show-item {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes increase {
  from { max-height: 0px; }
  to { max-height: 100px; }
}

@keyframes decrease {
  from { max-height: 100px; }
  to {
    max-height: 0;
    padding: 0;
  }
}

@keyframes entering-x {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes entering-y {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes entering-scale {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes show-color-item {
  0%,
  80% { background: #16b6c0; }
  100% { background: #333; }
}

@keyframes remove-color-item {
  0% { background-color: #333; }
  2%,
  100% { background-color: #ee6742; }
}

/* Entering X */
.entering-x .new { 
  animation:
    increase .3s ease both,
    show-item .4s ease .1s both,
    entering-x .7s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s both,
    show-color-item 2s ease both;
}

.entering-x .remove {
  animation:
    decrease .3s ease .8s both,
    remove-color-item 1s ease both,
    entering-x 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) reverse both,
    show-item 1s ease reverse both;
}

/* Entering Y */
.entering-y .new { 
  animation:
    increase .3s ease both,
    show-item .4s ease .1s both,
    entering-y .7s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s both,
    show-color-item 2s ease both;
}

.entering-y .remove {
  animation:
    decrease .3s ease .8s both,
    remove-color-item 1s ease both,
    entering-y 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) reverse both,
    show-item 1s ease reverse both;
}

/* Fade */
.fade .new { 
  animation:
    increase .3s ease both,
    show-item 1s ease .1s both,
    show-color-item 1.5s ease both;
}

.fade .remove {
  animation:
    decrease .3s ease 1s both,
    remove-color-item 1s ease both,
    show-item 1s ease reverse both;
}

/* Scale */
.scale .new { 
  animation:
    increase .3s ease both,
    show-item .4s ease .1s both,
    entering-scale .7s ease .1s both,
    show-color-item 2s ease both;
}

.scale .remove {
  animation:
    decrease .3s ease .5s both,
    remove-color-item .5s ease both,
    entering-scale .5s ease reverse both,
    show-item .5s ease reverse both;
}

/* Buttons */
.btn {
  display: inline-block;
  background-color: #222;
  border: solid 1px #222;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.7);
  font-size: 14px;
  padding: 10px;
  transition: all .3s ease;
}

.btn:hover,
.btn:focus {
  background-color: #111;
  outline: none;
}

.btn-add:hover,
.btn-add:focus { border-color: #16b6c0; }

.btn-remove:hover,
.btn-remove:focus { border-color: #ee6742; }

.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus {
  border-color: #333;
  background-color: #333;
  color: #666;
}

/* Form */
.form label {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.75);
}

.form label + label { padding-left: 20px; }

input:checked + span {
  color: gold;
  opacity: 0.85;
  transition: all .3s ease;
}

var add = document.getElementById('add'),
    remove = document.getElementById('remove'),
    list = document.getElementById("list"),
    effects = document.getElementById('form').effect;

for(var i=0; i< effects.length; i++) {
  effects[i].addEventListener('click', changeEffect, false);
};

add.addEventListener('click', createItem, false);
remove.addEventListener('click', removeItem, false);

var prefixes = ["webkit", "moz", "MS", "o", ""];
function prefixedEventListener(element, type, callback) {
  for (var p = 0; p < prefixes.length; p++) {
    if (!prefixes[p]) type = type.toLowerCase();
    element.addEventListener(prefixes[p]+type, callback, false);
  }
}

function createItem() {
  disableButtons();
  var item = document.createElement('li'),
  itemNumber = list.children.length + 1,
  textItem = document.createTextNode('Item ' + itemNumber);
  item.appendChild(textItem);
  item.classList.add('new');
  list.appendChild(item);
  prefixedEventListener(item,"AnimationEnd",function(e){
    if(e.animationName === 'show-color-item'){
      item.classList.remove('new');
      enableButtons();
    }
  });
};

function removeItem() {
  disableButtons();
  var items = list.children,
      element = items[items.length - 1];
  element.classList.add('remove');
  prefixedEventListener(element,"AnimationEnd",function(e){
    if(e.animationName === 'decrease'){
      element.remove();
      enableButtons();
    }
  });
};

function changeEffect() {
  list.classList.remove(list.classList[0]);
  list.classList.add(this.id);
}

function disableButtons() {
  add.setAttribute('disabled', 'disabled');
  remove.setAttribute('disabled', 'disabled');
}

function enableButtons() {
  add.removeAttribute('disabled');
  remove.removeAttribute('disabled');
}