mardi 21 avril 2015

moz second animation goes back to start

I'm having a problem on the second animation on -moz-animation: The problem is when it calls the second animation fadeOut it goes back to the start from where the first animation took place.

codepen // keyframes are at the bottom of the document at codepen.io

.modal {
   -moz-animation: flip_opacity 1s ease-in forwards, fadeOut 1s 2s ease-out forwards;  
}

// first animation

@-moz-keyframes flip_opacity {
0% {
  -moz-transform: rotateX(0deg);
  right: 500px;
  opacity: 0;
}
100% {
  -moz-transform: rotateX(360deg);
  right: 0px;
  opacity: 1
}
}

// second animation

@-moz-keyframes fadeOut {
0% {
  opacity: 1;    
}
99% {
  opacity: 0;
}
100% {
  display: none;
}
}

Aucun commentaire:

Enregistrer un commentaire