<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);
This Pen doesn't use any external CSS resources.