<div class="panel">
  <div class="box-1 texto box-wipe-leave" id="box-1">
    Box 1!
  </div>
   <div class="clean-box" id="box-2">
    Box 2!
  </div>
</div>
<div class="link texto">
  <h3>Inspirado de <a href="https://css-tricks.com/animating-with-clip-path/" target="blank">aqu&iacute;</a>
</div>

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");

.anima-circle{
  animation: circle 1.5s;
}

.anima-circle-reverse{
  animation: circle 2s reverse;
}

@keyframes circle {
  50% { clip-path: circle(75%); }
  100% { clip-path: circle(0%); }
}

.panel{
  background-color:#101010;
  width:155px;
  height:155px;
  margin: 0 auto;
}

.link{
  background-color:#CFCFCF;
  margin: 10px auto;
}

.box-1{
  background-color:#307B21;
  width:150px;
  height:150px;
  padding:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:visible;
  position:relative;
  top:1;
  left:1;
  z-index:2;
}

.box-2{
  background-color:#4371AD;
  width:150px;
  height:150px;
  visibility:visible;
  position:relative;
   display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}

.clean-box{
  display:none;
}

.texto{
  font-family: 'Luckiest Guy';
  font-size: 36px;
  color:white;
  padding:2px;
  text-align:center;
}
/*Css para poligono*/
.polygon-active { 
  animation: 2s polygon; 
}

.polygon-reverse { 
  animation: 1s polygon reverse; 
}

@keyframes polygon {
  0% { clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%); }
  100% { clip-path:  polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%); }
}
/*Css para efecto in out*/
.box-wipe-enter { animation: 1s box-wipe-enter; }
.box-wipe-leave { animation: 1s box-wipe-leave; }

@keyframes box-wipe-enter {
  0% { clip-path: inset(25% 100% 25% -50%); }
  50% { clip-path: inset(25% 0% 25% 50%); }
  100% { clip-path: inset(0); }
}

@keyframes box-wipe-leave {
  0% { clip-path: inset(0); }
  50% { clip-path: inset(25% 50% 25% 0%); }
  100% { clip-path: inset(25% -50% 25% 100%);}
}

function init_anim()
{
  var dbox = document.getElementById("box-1");
  
  dbox.addEventListener('animationstart', () => {
  });

  dbox.addEventListener('animationend',change);
}

function change()
{
  var dbox = document.getElementById("box-1");
  var dbox_2 = document.getElementById("box-2");
  
  dbox.className = "box-1 texto box-wipe-leave";
  dbox.className = "clean-box";
  dbox.style.zIndex = 0;
  dbox_2.className = "box-2 texto box-wipe-enter";
  //dbox_2.className = "box-2 texto anima-circle-reverse";
}

window.onload=init_anim;