:target class重复上一个动画

时间:2015-04-22 06:01:02

标签: html css html5 css3

有些人可以帮我看一下这个动画我遇到的问题是我的消息的关闭按钮上的目标类 - 我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;    
  }
}

1 个答案:

答案 0 :(得分:0)

动画无法显示。不透明度动画足以使其显示和消失,因此您可以删除display:none并再试一次