*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body{
  background: silver;
  width: 100%;
  overflow-x: hidden;
}

.flexwrap{
  margin: 0 auto;
  width: 60%;
}

.item{
  font: 300 36px sans-serif;
  line-height: 1.3;
  padding: 100px 100px;
  text-align: center;
  color: white;
  cursor: pointer;
  clear: both;
  overflow: hidden;
}

.i1{
  background: salmon;
}

.i2{
  background: CornflowerBlue;
}

.i3{
  background: MediumSeaGreen;
}

.i4{
  background: SandyBrown;
}

.item.active{
  animation: remove 1s linear 0s 1 forwards;
  -webkit-animation: remove 1s linear 0s 1 forwards;
}

@-webkit-keyframes remove{
  0% {opacity: 1;
      max-height: 1000px;}
  99.9% {opacity: 0;
         max-height: 0px;
         padding: 0px 100px;}
  100% {opacity: 0;
        max-height: 0;
        padding: 0px 0px;
        animation: poof 0.1s linear 0s 1;
  -webkit-animation: poof 0.1s linear 0s 1;}
}

@keyframes remove{
  0% {opacity: 1;
      max-height: 1000px;}
  99.9% {opacity: 0;
         max-height: 0px;
         padding: 0px 100px;}
  100% {opacity: 0;
        max-height: 0;
        padding: 0px 0px;
        animation: poof 0.1s linear 0s 1;
  -webkit-animation: poof 0.1s linear 0s 1;}
}

@-webkit-keyframes poof{
  from {display: flex;}
  to {display: none;}
}

@keyframes poof{
  from {display: flex;}
  to {display: none;}
}