animation with css hexagons

HTML

<div class="container">
    <div class="shape x1"></div>
    <div class="shape x2"></div>
    <div class="shape x3"></div>
    <div class="shape x4"></div>
    <div class="shape x5"></div>
    <div class="shape x6"></div>
    <div class="button">X</a>
</div>

CSS

.container {
    position:relative;
    display:inline-block;
    margin:50px 200px;
    height:225px;
    width:225px;
    font-family: 'Arial';
}
.shape {
	width: 0;
	height: 0;
	border-left: 58px solid transparent;
	border-right: 58px solid transparent;
	border-bottom: 100px solid red;
    position:absolute;
    transform-origin: center;
}
.trans1,.trans2, .trans3, .trans4, .trans5, .trans6 {       
   border-bottom: 100px solid blue;
    transition: all 1s linear;
} 
.x1 {
    transform: rotate(90deg);
    left:0;
    top:50px;    
}
.trans1 {
    left:-25px;
    top:50px;
}
.x2 {
    transform: rotate(30deg);
    left:26px;
    top:100px;
} 
.trans2 {
    left:15px;
    top:120px;
}
.x3 {
    transform: rotate(-90deg);
    right:0;
    top:50px;
}
.trans3 {
    right:-25px;
    top:50px;
}
.x4 {
    transform: rotate(-30deg);
    right:26px;
    top:100px;
}
.trans4 {
    right:15px;
    top:120px;
}
.x5 {
    transform: rotate(150deg);
    left:26px;
    top:0px;
}
.trans5 {
    left:15px;
    top:-20px;
}
.x6 {
    transform: rotate(-150deg);
    right:26px;
    top:0px;
}
.trans6 {
    right:15px;
    top:-20px;
}

.button {
	width: 40px;
	height: 25px;
	background: white;
    position:absolute;
    top:88px;
       left:92px;
    text-align:center;
    font-weight:bold;
    color:red;
    cursor:pointer;
    line-height:1.5;
}
.button2 {
    color:blue;
    transition: all 1s linear;
}
.button:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 10px solid white;
}
.button:after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 10px solid white;    
}

JavaScript

$(document).ready(function () {
            $('.button').click(function () {
                $('.x1').toggleClass("trans1");
                $('.x2').toggleClass("trans2");
                $('.x3').toggleClass("trans3");
                $('.x4').toggleClass("trans4");
                $('.x5').toggleClass("trans5");
                $('.x6').toggleClass("trans6");
                $('.button').toggleClass("button2")
                
            });
        });