<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container {
background: #224;
overflow: hidden;
width: 400px;
height: 400px;
padding: 10px 0 0 10px;
}
#first {
background-color: #e6005c;
width: 50px;
height: 50px;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
cursor: pointer;
position: relative;
}
#first.anim {
animation: first 0.4s linear forwards;
}
#first.shrink {
animation: first__shrink 0.3s ease forwards;
}
#second {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
transform: scale(0);
background-color: white;
top: -50px;
z-index: 100;
}
#second.anim {
animation: second 0.2s linear forwards;
}
#second.shrink {
animation: second__shrink 0.2s linear forwards;
}
@-webkit-keyframes first {
from {
transform: scale(1);
transform: scale(1);
}
to {
transform: scale(50);
transform: scale(50);
}
}
@-webkit-keyframes first__shrink {
from {
transform: scale(50);
transform: scale(50);
}
to {
transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes second {
from {
transform: scale(0);
transform: scale(0);
}
to {
transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes second__shrink {
from {
transform: scale(1);
transform: scale(1);
}
to {
transform: scale(0);
transform: scale(0);
}
}
</style>
<div class="container">
<div id="first"></div>
<div id="second"></div>
</div>
<script>
$(function() {
var $first = $('#first');
var $second = $('#second');
$first.on('mousedown', function(e) {
$first.removeClass('shrink');
$second.removeClass('shrink');
$first.addClass('anim');
$second.addClass('anim');
});
$second.on('mousedown', function(e) {
$first.removeClass('anim');
$second.removeClass('anim');
$first.addClass('shrink');
$second.addClass('shrink');
});
});
</script>