:: after动画期间某些区域无法单击块

Question

由于某些原因，单击此块后某些区域无法进入指定的图像（请尝试使用该块的右上部分）。当我从animation: shine2 .6s ease;删除#examples .example-block:hover::after部分时，单击正常。看起来该动画阻止了块中某些部分的点击。

非常感谢您在:)上的帮助

#examples .example-block {
  border-radius: 0.813rem;
  background: #ebf3f7;
  box-shadow: 0 21px 40px -15px #a2c7da;
  transition: background .4s ease-out, opacity .4s ease-out, -webkit-filter .4s ease-out;
  transition: background .4s ease-out, filter .4s ease-out, opacity .4s ease-out;
  transition: background .4s ease-out, filter .4s ease-out, opacity .4s ease-out, -webkit-filter .4s ease-out;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 283px;
  overflow: hidden; }
  
.text-center {
  text-align: center !important; }

@keyframes levitate-sml-grey {
  0% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
    box-shadow: 0 21px 40px -15px #a2c7da; }
  50% {
    -webkit-transform: translate(0, -4px);
            transform: translate(0, -4px);
    box-shadow: 0 25px 40px -15px #b4d2e1; }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
    box-shadow: 0 21px 40px -15px #a2c7da; } }

@keyframes shine2 {
  50% {
    left: -90%; }
  50% {
    left: 110%; } }
  
  #examples .example-block:hover {
    background: #15adfa;
    background: linear-gradient(to right, #15adfa, #1cffff);
    cursor: pointer;
    -webkit-animation: levitate-sml-grey 1.3s ease-in-out 1;
            animation: levitate-sml-grey 1.3s ease-in-out 1; }
            
    #examples .example-block:hover a {
      opacity: 1;
      right: 0;
      top: 0;
      -webkit-transform: translateY(0%);
              transform: translateY(0%); }
              
  #examples .example-block:active {
    opacity: .8; }
    
  #examples .example-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #1cffff, rgba(28, 255, 255, 0.5), rgba(255, 255, 255, 0));
    -webkit-transform: skewX(125deg);
            transform: skewX(125deg);
    transition: -webkit-transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out; }
    
  #examples .example-block:hover::after {
    -webkit-animation: shine2 .6s ease;
            animation: shine2 .6s ease;
    -webkit-transform: skewX(225deg);
            transform: skewX(225deg); }
            
  #examples .example-block a {
    display: block;
    position: absolute;
    top: 0;
    opacity: 0;
    left: 0;
    right: 500%;
    bottom: 0;
    transition: opacity .4s ease-out;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
            
  #examples .example-block .image {
    width: 100%;
    height: auto;
    transition: opacity .4s ease-out, -webkit-transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out, -webkit-transform .4s ease-out; }
    
  #examples .example-block:hover .image {
    opacity: 0.2;
    -webkit-transform: rotate(7deg) scale(1.6);
            transform: rotate(7deg) scale(1.6); }
            
  #examples .example-block .svg {
    max-width: 41px;
    height: auto;
    top: 41%;
    position: relative; }

              
<div id="examples" class="text-center">              
  <div class="example-block" data-aos="appear3">
    <img src="https://via.placeholder.com/350x150" class="image" />
    <a href="https://via.placeholder.com/350x150" class="js-smartPhoto" data-caption="test" data-id="test" data-group="test"><img src="https://via.placeholder.com/30x30" class="svg" /></a>
   </div>
</div>