circular transition

by Nikita Jadhao

HTML

<title>Circular Page Transition - CSS</title>

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

CSS

body{
    width:100%;
    height:100%;
    overflow:hidden;
}
.circle{
    position:absolute;
    width:300px;
    height:300px;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-150px;
    background:#21B9AA;
    border-radius:50%;
    -webkit-transition:all 3s;
    transition: all 0.5s ease;
}
.circle.active{
    width:0px;
    height:0px;
    top:50%;
    left:50%;
    margin-left:0px;
    margin-top:0px;
}
.page{
    opacity:0;
    z-index:99;
    position:relative;
    -webkit-transition:all 0.5s;
    -webkit-transition-delay: 1s; 
    
}

.page.active{
opacity:1;
}

div:nth-child(1){
    background-color:#53619A;
}
div:nth-child(2){
    background-color:#5BC9EE;
}
div:nth-child(3){
    background-color:#21B9AA;
}
div:nth-child(4){
    background-color:#E5983E;
}

JavaScript

$('.circle').click(function(){
    $(this).toggleClass('active');
});