How to delay a hyperlink until a CSS animation end

Question

I'm trying to get the anchor tag to redirect as soon as the CSS animation ends. I tried capturing the href in jQuery and using 'setTimeout' to cause a delay before going to the anchor location (this is what was recommended in previous threads), but it hasn't been working.

$(document).ready(function() {

  $('.section').click(function() {

    var goTo = this.getAttribute("href"); //HOLDS HREF

    var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN
      {
        $(this).removeClass('clicked');
      });

    var $elementB = $('.section').bind('animationend', function() {
      $(this).removeClass('clicked');
    });

    $('.section').click(function() {
      $(this).addClass('clicked'); //ANMATION END
    });

    setTimeout(function() { //SUPPOSED TO DELAY LINK
      window.location = goTo;
    }, 300);
  });
});

a {
  overflow: hidden;
}

.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}

.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}

.clicked {
  animation: event 1.4s;
}

.clicked > .response {
  animation: response 1.6s;
}

@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}

@keyframes response {
  0% {}
  16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="section">
  <div class="response"></div>
</a>

Answer 1

The issue is because the request is sent to load the new page immediately, hence the current UI is unloaded straight away with few further updates. To get around this you can stop the default behaviour of the link using preventDefault() and then make the request for the next page manually after the animation ends, like this:

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('href'));
    }, 300);
  });
});

a {
  overflow: hidden;
}
.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}
.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}
.clicked {
  animation: event 1.4s;
}
.clicked > .response {
  animation: response 1.6s;
}
@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}
@keyframes response {
  0% {} 16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="section">
  <div class="response"></div>
</a>