The animation of the menu buttons is not working correctly

Hello, I'm joking around in CSS, HTML and JS to build a random website. In theory the site was all right, but now that I ran the site and went to open on my cell phone and the animation of the back of the menu buttons are a bit bugged. Sometimes you click on the buttons (especially on the letter) and they do not retract back, there you have to click again or click on the menu to force the buttons back.

In general it is the button test4 that more buga.

Note: I'm using the awesome fonts for the icons.

My Site is the one

HTML:

    <div class="parent2 slideDown noselect">
        <a href="#home"><div class="test1"><i class="fa fa-home fa-2x"></i></div></a>
        <a href="#andrey"><div class="test2"><i class="fa fa-user fa-2x"></i></div></a>
        <a href="#mosufe"><div class="test3"><i class="fa fa-gamepad fa-2x"></i></div></a>
        <a href="#contato"><div class="test4"><i class="fa fa-envelope-o fa-2x"></i></div></a>
        <div class="mask2"><i class="fa fa-home fa-3x"></i></div>
    </div>

CSS:

.parent2 {
  top:15px;
  left:15px;
  position:fixed;
  display:block;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.test1 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    position:absolute;
}
.test2 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}
.test3 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;  
}
.test4 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;  
}
.test1, .test2, .test3, .test4{
  background-color: #cc4444;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
}
.mask2 {
  top:15px;
  left:15px;
  width:100px;
  height:100px;
  background:#66aadd;
  border-radius:50%;
  position:absolute;
  z-index:21;
  color:white;
  text-align:center;
  line-height:120px;
  cursor:pointer;
  position:fixed;
}

JS:

$(document).ready(function() {
    /*configuração do menu*/
  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;

  var evento = 'ontouchstart' in window ? 'touchstart' : 'click';
  $('.parent2').on(evento, function() {
    if (!active1) $(this).find('.test1').css({'transform': 'translate(0px,125px)'});
    else $(this).find('.test1').css({'transform': 'none'}); 
     if (!active2) $(this).find('.test2').css({'transform': 'translate(60px,105px)'});
    else $(this).find('.test2').css({'transform': 'none'});
      if (!active3) $(this).find('.test3').css({'transform': 'translate(105px,60px)'});
    else $(this).find('.test3').css({'transform': 'none'});
      if (!active4) $(this).find('.test4').css({'transform': 'translate(125px,0px)'});
    else $(this).find('.test4').css({'transform': 'none'});
    active1 = !active1;
    active2 = !active2;
    active3 = !active3;
    active4 = !active4;
    });
     /*Configuração da velocidade em que a tela se mexe*/
    $(".slideDown a").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
     });
});

The menu example I took from this site in CODEPEN

And the demo version of this menu is this

My Site is the one

My menu in codepen