mardi 21 avril 2015

:target class repeats previous animation

Could some give me hand with this animation the problem I'm having is with the target class which is on the close button of my messages - line 161 of my codepen.io. The problem I'm having is making the display:block to display none and not re-show the element again - when you click the cross button it disappears but when you click another cross button on another message it show the previous one again - how can this be stopped, could someone give me some help please.

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;    
  }
}

Aucun commentaire:

Enregistrer un commentaire