<div id="btn-container">
    <input type="button" id="btnSend" value="Add" />
  </div>
  <div class="flow-container">
    <div><div>Content 1</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 2</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 3</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 4</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 5</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 6</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 7</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 8</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 9</div><input class="button-remove-item" type="button" value="-" /></div>
    <div><div>Content 10</div><input class="button-remove-item" type="button" value="-" /></div>
  </div>
$basecolor:#23D77F;

%button-base{
  border:0;
  background-color:darken($basecolor,20%);
  color:white;   
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  outline: none;
}

body{
  padding: 0;
  margin: 0;
}
div#btn-container{
  margin:20px 10px;
  input{    
    @extend %button-base;
    font-size:36px;
    padding:10px 30px;
  }
}
div.flow-container{
  width:100%;
  min-width:600px;
  display:inline-block;
  > div{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float:left;
    width:30%;
    text-align:center;
    line-height:50px;
    height:50px;
    background-color:$basecolor;
    color:white;
    border:1px solid #fff;
    vertical-align: middle;
    margin:5px;
    input.button-remove-item{
      @extend %button-base;
      font-size:18px;
      width:25px;
      height:25px;
      margin-top:12px;
      margin-right:5px;
      float:right;   
    }
    > div{
      display:inline-block;
      cursor: pointer;
    }
  }
}
input.content-edit{
  font-size:16px;
  width:70%;
  border:1px solid #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding:3px;
  outline: none;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

$(function(){
      $("input:button#btnSend").on("click",function(){
        var item=$("<div><div>Content "+($("div.flow-container > div").length+1)+"</div><input class=\"button-remove-item\" type=\"button\" value=\"-\" /></div>");
          $("div.flow-container").append(item);
        item.addClass("animated flipInX");
        item.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          item.removeClass("animated flipInX");
        });
      });  
      $(document).on("click","div.flow-container > div > input.button-remove-item",function(){
        
        var target=$(this).parent("div");
        target.addClass("animated flipOutX");
        target.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          target.remove();
        });
      });
      
      $(document).on("click","div.flow-container > div > div",function(){
        var $this=$(this).parent("div");
        
        if($this.find("input:text.content-edit").length == 0){
          $(this).fadeOut(300,function(){
            var t=$(this).html();
            var inputdom=$("<input type=\"text\" class=\"content-edit\" value=\""+t+"\" />");
            
            $(this).after(inputdom);
            inputdom.focus();
          });
        }
      });
      
      $(document).on("focusout","input:text.content-edit",function(){
        var showtext=$(this).prev("div");
        showtext.html($(this).val());
        $(this).fadeOut(300,function(){
          showtext.fadeIn(300);
          $(this).remove();
        });
      });
        
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js