<div class="container">
   <div class="item item-transition item-a">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
   </div>
   <div class="item item-transition item-b">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
   </div>
   <div class="item item-animation item-c">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
   </div>
   <div class="item item-animation item-d">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
   </div>
</div>
@import 'bourbon';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);

* {
   @include box-sizing(border-box);
}

body {
   margin-top: 40px;
   margin-bottom: 40px;
   font-family: 'Open Sans', sans-serif;
}

.container {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   @include align-items(center);
   @include display(flex);
   @include justify-content(center);
   background: #D9C252;
   @include linear-gradient(45deg, #D9C252 0%, darken(#D9C252, 10%) 100%);
}

.item {
   width: 60px;
   height: 50px;
   background: #fff;
   margin: 10px;
   padding: 10px;
   box-shadow: 0 0 10px rgba(0,0,0,.1);
   cursor: pointer;
   position: relative;
   overflow: hidden;
   border-radius: 2px;
   backface-visibility: hidden;
   
   span {
      display: block;
      background: darken(#7A8C51, 20%);
      width: calc(100% - 30px);
      height: 5px;
      position: absolute;
      left: 15px;
      right: 15px;
      
      &.top {
         top: 13px;
      }
      
      &.middle {
         top: 23px;
      }
      
      &.bottom {
         top: 33px;
      }
   }
}

// A version

.item-a,
.item-b{
   span {
      transition-property: all;
      transition-duration: 0.2s;
      transition-delay: 0;
      transition-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
   }
}

.item-a.active {
   
   span {
      transition-property: all;
      transition-duration: 0.2s;
      transition-delay: 0;
      transition-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
   }
   
   .top {
      transform: translateY(10px) rotate(45deg);
   }
   
   .middle {
      transform: translateX(-100px);
   }
   
   .bottom {
      transform: translateY(-10px) rotate(-45deg);
   }
}

// B version

.item-b.active {
   
   span {
      transition-property: all;
      transition-duration: 0.2s;
      transition-delay: 0;
      transition-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
   }
   
   .top {
      transform: translateY(10px) rotate(45deg);
   }
   
   .middle {
      opacity: 0;
      transform: scale(0,0);
   }
   
   .bottom {
      transform: translateY(-10px) rotate(-45deg);
   }
}

// C version

.item-c {
   &.active-in {
      .top {
         animation-name: item-c-top-in;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .middle {
         animation-name: item-c-middle-in;
         animation-duration: .2s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .bottom {
         animation-name: item-c-bottom-in;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }
   }
   
   &.active-out {
      .top {
         animation-name: item-c-top-out;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .middle {
         animation-name: item-c-middle-out;
         animation-duration: .2s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .bottom {
         animation-name: item-c-bottom-out;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }
   }
}

@keyframes item-c-top-in {
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(10px) rotate(135deg);
  }
}

@keyframes item-c-middle-out {
  100% {
    opacity: 0;
  }
}

@keyframes item-c-bottom-out {
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-10px) rotate(45deg);
  }
}

@keyframes item-c-top-out {
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(10px) rotate(135deg);
  }
}

@keyframes item-c-middle-in {
  100% {
    opacity: 0;
  }
}

@keyframes item-c-bottom-in {
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-10px) rotate(45deg);
  }
}

// D version

.item-d {
   &.active-in {
      .top {
         animation-name: item-d-top-in;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .middle {
         animation-name: item-d-middle-in;
         animation-duration: .2s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .bottom {
         animation-name: item-d-bottom-in;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: alternate;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }
   }
   
   &.active-out {
      .top {
         animation-name: item-d-top-out;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .middle {
         animation-name: item-d-middle-out;
         animation-duration: .2s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }

      .bottom {
         animation-name: item-d-bottom-out;
         animation-duration: .4s;
         animation-iteration-count: 1;
         animation-direction: reverse;
         animation-timing-function: cubic-bezier(.48,-0.28,.41,1.4);
         animation-fill-mode: forwards;
      }
   }
}

@keyframes item-d-top-in {
   50% {
      transform: translateY(10px);
   }
   100% {
      transform: translateY(10px) rotate(45deg);
   }
}

@keyframes item-d-middle-in {
  100% {
    opacity: 0;
  }
}

@keyframes item-d-bottom-in {
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
  }
}

@keyframes item-d-top-out {
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(10px) rotate(-45deg);
  }
}

@keyframes item-d-middle-out {
  100% {
    opacity: 0;
  }
}

@keyframes item-d-bottom-out {
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-10px) rotate(45deg);
  }
}
View Compiled
(function($) {
   $('.item-transition').on('click', function() {
      $(this).toggleClass('active');
   });
   
   $('.item-animation').on('click', function() {
      if($(this).hasClass('active-in')) {
         $(this).removeClass('active-in');
         $(this).addClass('active-out');
      } else {
         $(this).removeClass('active-out');
         $(this).addClass('active-in');
      }
   });
})(jQuery);

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