CodePen

HTML

            
              <div id="wrap">
  <div class="listContainer">
    <h4>Actions</h4>
    <ul>
      <li>
        <a href="#" class="insert action-insert">Insert</a>
      </li>
      <li>
        <a href="#" class="remove action-remove">Remove *</a>
      </li>
      <li>
        <a href="#" class="replace action-replace">Replace *</a>
      </li>
    </ul>
    <br>
    <select name="animation-type">
      <option value="slide-left" selected>Slide Left</option>
      <option value="slide-top">Slide Top</option>
      <option value="slide-bottom">Slide Bottom</option>
      <option value="slide-right">Slide Right</option>
      <option value="scale">Scale</option>
      <option value="fade">Fade</option>
    </select>
  </div>
  <div class="listContainer">
    <h4>Preview</h4>
    <ul class="list target">
      <li class="list-item">
        <a href="#">List Item</a>
      </li>
    </ul>
  </div>
  <hr />
  <footer><p>Inspired by <a href="https://medium.com/design-ux/926eb80d64e3">Transitional Interfaces
    </a></p>
    <p>* <small>The "replace" and "remove" actions require you to first use the "insert" action.</small></p></footer>
</div>
            
          
!

CSS

            
              .listContainer {
  display: inline-block;
  vertical-align: top;
  margin-right: 1em;
}
ul {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: #222;
  border: 2px solid #000;
}
ul li {
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  background-color: #222;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}
ul li a{
  &,
  &:visited{
    box-sizing: border-box;
    display: inline-block;
    padding: 0.5em 1em;
    width: 100%;
    color: #fff;
    text-decoration: none;
  }
    
  &:hover{
    color: #ffe960;
  }
}

// Scale animation

.scale-insertion{
  animation: scale-insertion 750ms;
}

.scale-removal{
  animation: scale-removal 500ms;
}

@keyframes scale-insertion {
  0% {
    transform: scale(0.0);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}

@keyframes scale-removal {
  0% {
    transform: scale(1.0);
  }
  30% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.0);
  }
}

// Slide Top animation

.slide-top-insertion{
  animation: slide-top-insertion 500ms;
}

.slide-top-removal{
  animation: slide-top-removal 500ms;
}

@keyframes slide-top-insertion {
  0% {
    transform : translateY(-50px);
    opacity : 0.0;
  }
  100% {
    transform : translateY(0);
    opacity : 1.0;
  }
}

@keyframes slide-top-removal {
  0% {
    transform : translateY(0);
    opacity : 1.0;
  }
  100% {
    transform : translateY(-50px);
    opacity : 0.0;
  }
}

// Slide Bottom animation

.slide-bottom-insertion{
  animation: slide-bottom-insertion 500ms;
}

.slide-bottom-removal{
  animation: slide-bottom-removal 500ms;
}

@keyframes slide-bottom-insertion {
  0% {
    transform : translateY(50px);
    opacity : 0.0;
  }
  100% {
    transform : translateY(0);
    opacity : 1.0;
  }
}

@keyframes slide-bottom-removal {
  0% {
    transform : translateY(0);
    opacity : 1.0;
  }
  100% {
    transform : translateY(50px);
    opacity : 0.0;
  }
}

// Slide Left animation

.slide-left-insertion{
  animation: slide-left-insertion 500ms;
}

.slide-left-removal{
  animation: slide-left-removal 500ms;
}

@keyframes slide-left-insertion {
  0% {
    transform : translateX(-50px);
    opacity : 0.0;
  }
  100% {
    transform : translateX(0);
    opacity : 1.0;
  }
}

@keyframes slide-left-removal {
  0% {
    transform : translateX(0);
    opacity : 1.0;
  }
  100% {
    transform : translateX(-50px);
    opacity : 0.0;
  }
}

// Slide Right animation

.slide-right-insertion{
  animation: slide-right-insertion 500ms;
}

.slide-right-removal{
  animation: slide-right-removal 500ms;
}

@keyframes slide-right-insertion {
  0% {
    transform : translateX(50px);
    opacity : 0.0;
  }
  100% {
    transform : translateX(0);
    opacity : 1.0;
  }
}

@keyframes slide-right-removal {
  0% {
    transform : translateX(0);
    opacity : 1.0;
  }
  100% {
    transform : translateX(50px);
    opacity : 0.0;
  }
}

// Fade animation

.fade-insertion{
  animation: fade-insertion 750ms;
}

.fade-removal{
  animation: fade-removal 500ms;
}

@keyframes fade-insertion {
  0% {
    opacity : 0.0;
  }
  100% {
    opacity : 1.0;
  }
}

@keyframes fade-removal {
  0% {
    opacity : 1.0;
  }
  100% {
    opacity : 0.0;
  }
}

/* styling */
 html {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
	overflow-x: hidden;
	overflow-y: hidden;
}
body {
	text-align: center;
	display: table;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}
#wrap {
	box-sizing: border-box;
	display: table-cell;
	vertical-align: top;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function () {
	var newItem = '<li class="list-item newItem"><a href="#">List item</a></li>';
	var animationType = $("select").val();
	var animationList = [];

	$("select option").each(function () {
		animationList.push($(this).val());
	});

	$("select").on("change", function () {
		var items = $(".target").find(".newItem");
		items.each(function () {
			for (var i = 0; i < animationList.length; i++) {
				$(this).removeClass(animationList[i] + '-insertion');
				$(this).addClass($("select").val()+ '-insertion');
			}
		});
	});

	$(".action-insert").on("click", function () {
		animationType = $("select").val();
		$(".target").append(newItem);
		$(".newItem").addClass(animationType + "-insertion");
		return false;
	});
	$(".action-remove").on("click", function () {
		animationType = $("select").val();
		$(".newItem").addClass(animationType + "-removal");
		setTimeout(function () {
			$(".newItem").remove();
		}, 500);
		return false;
	});
	$(".action-replace").on("click", function () {
		animationType = $("select").val();
		if ($(".newItem").length) {
			$(".newItem").addClass(animationType + "-removal");
			setTimeout(function () {
				$(".newItem").remove();
				$(".target").append(newItem);
				$(".newItem").addClass(animationType + "-insertion");
			}, 500);
		}
		return false;
	});
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................