Javascript 动画可以'；不要再执行第二次

我有一个当我点击它时会触发的动画。问题是我不能在第一次执行后再次触发它。Javascript中的延迟似乎不起作用，无论您输入什么值，动画都保持不变。通常，所有这些代码都是在访问外部链路之前设置延迟

（单击图像以触发动画）

HTML

CSS

---

您需要删除单击的

类。动画只播放一次，因为
单击的
类只添加了一次。@如果删除
单击的
则整个动画不再工作。我的意思是，在动画完成后删除类，以便用户再次单击时，再次添加类。动画完成后，可以使用
animationend
事件删除
单击的
类@Yousaf是的，它正在工作：）JS的延迟怎么办？不管我怎么说，它似乎都不起作用。试着在本地运行代码，而不是在任何在线编辑器中运行。
<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"><img style="width:100%;"src="https://images.hdqwalls.com/wallpapers/huntdown-4k-ky.jpg"></div></a>

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

a {
  overflow: hidden;
}
.section {
  background-color: black;
  position: absolute;
width: 100%;
    height: 100%;
    left: 0;
    top: 0;
      transition: 2s ease-out;
}
.response {
  position: relative;
  top: 0px;
  left: 00px;
  width: 100%;
  height: 100%;
  transition: 4s ease-out;
  opacity: 1;
}
.clicked {
  animation-delay: 2s;
  animation: event 2s;
}
.clicked > .response {
  
  animation: response 4s;
}
@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: 1;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}