html - :target class repeats previous animation

Question

有人可以帮我处理这个动画吗？我遇到的问题是我消息的关闭按钮上的目标类 - 我的 codepen.io 的第 161 行.我遇到的问题是使显示:阻止不显示并且不再重新显示该元素 - 当您单击十字按钮时它会消失但是当您单击另一条消息上的另一个十字按钮时它会再次显示前一个 - 如何这可以停止吗，有人可以给我一些帮助吗。

codepen.io

.wrapper:target{    
  -webkit-animation: close_toast 2s ease both;
  -moz-animation: close_toast 2s ease both;
  animation: close_toast 2s ease both;  
}

@-webkit-keyframes close_toast {
  0% { 
    display: block;
    opacity: 1;
    right: 0px;
  } 
  99% {
    opacity: 0;
    right: 0px;     
  }
  100% {
    display: none;
    opacity: 0;    
    right: 0px;    
  }
}

Answer 1

动画无法显示。不透明度动画足以使其出现和消失，因此您可以删除 display:none 并重试