/*Square*/
@keyframes square-to-triangle{
  0% {
    -webkit-clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
    clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
  }
}

@keyframes square-to-pentagon{
  0% {
    -webkit-clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
    clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
  }
}

@keyframes square-to-rabbet{
  0% {
    -webkit-clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
    clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
    clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
  }
}

@keyframes square-to-star{
  0% {
    -webkit-clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
    clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 0%,100% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%,0% 100%,0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
  }
}


/*Triangle*/
@keyframes triangle-to-pentagon{
  0% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
  }
}

@keyframes triangle-to-rabbet{
  0% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
    clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
  }
}

@keyframes triangle-to-star{
  0% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
  }
}


/*Pentagon*/
@keyframes pentagon-to-rabbet{
  0% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
  }
  100% {
    -webkit-clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
    clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
  }
}

@keyframes pentagon-to-star{
  0% {
    -webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
    clip-path: polygon(50% 0%,50% 0%,50% 0%,100% 38%,100% 38%,100% 38%,82% 100%,82% 100%,18% 100%,18% 100%,0% 38%,0% 38%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
  }
}

/*Rabett*/
@keyframes rabbet-to-star{
  0% {
    -webkit-clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
    clip-path: polygon(0% 15%,15% 15%,15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0% 85%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
  }
}


/*Square*/
.square-to-triangle{
  animation: square-to-triangle linear 0.5s;
}

.square-to-pentagon{
  animation: square-to-pentagon linear 0.5s;
}

.square-to-rabbet{
  animation: square-to-rabbet linear 0.5s;
}

.square-to-star{
  animation: square-to-star linear 0.5s;
}


/*Triangle*/
.triangle-to-square{
  animation: square-to-triangle linear reverse 0.5s;
}

.triangle-to-pentagon{
  animation: triangle-to-pentagon linear 0.5s;
}

.triangle-to-rabbet{
  animation: triangle-to-rabbet linear 0.5s;
}

.triangle-to-star{
  animation: triangle-to-star linear 0.5s;
}




/*Pentagon*/
.pentagon-to-square{
  animation: square-to-pentagon linear reverse 0.5s;
}

.pentagon-to-triangle{
  animation: triangle-to-pentagon linear reverse 0.5s;
}

.pentagon-to-rabbet{
  animation: pentagon-to-rabbet linear 0.5s;
}

.pentagon-to-star{
  animation: pentagon-to-star linear 0.5s;
}


/*rabbet*/
.rabbet-to-square{
  animation: square-to-rabbet linear reverse 0.5s;
}

.rabbet-to-triangle{
  animation: triangle-to-rabbet linear reverse 0.5s;
}

.rabbet-to-pentagon{
  animation: pentagon-to-rabbet linear reverse 0.5s;
}

.rabbet-to-star{
  animation: rabbet-to-star linear 0.5s;
}


/*star*/
.star-to-square{
  animation: square-to-star linear reverse 0.5s;
}

.star-to-triangle{
  animation: triangle-to-star linear reverse 0.5s;
}

.star-to-pentagon{
  animation: pentagon-to-star linear reverse 0.5s;
}

.star-to-rabbet{
  animation: rabbet-to-star linear reverse 0.5s;
}