将淡出效果添加到此动画中

Question

So I found a really cool animation for social link and I wanted to modify it so that I had the ability to make it also fade out. The original code is here:

.right {
position: relative;
height: 60px;
width: 400px;
float: left;
color: $dark;
padding-left: 10px;
font-size: 30px;
line-height: 60px;
white-space: nowrap;
font-family: 'Montserrat';
animation: popup-text 2s 1 ease-out;
-webkit-animation: popup-text 2s 1 ease-out;    

span {
  white-space: nowrap;
}

@keyframes popup-text { //change to popup                                                               
  0% {color: rgba(16,16,16,0); text-indent: -10px}
  40% {color: rgba(16,16,16,0); text-indent: -10px}
  50% {color: rgba(16,16,16,1); text-indent: 0px;}
  100% {color: rgba(16,16,16,1); text-indent: 0px;}
}
@-webkit-keyframes popup-text { //change to popup                                                               
  0% {color: rgba(16,16,16,0); text-indent: -10px}
  40% {color: rgba(16,16,16,0); text-indent: -10px}
  50% {color: rgba(22,16,16,1); text-indent: 0px;}
  100% {color: rgba(16,16,16,1); text-indent: 0px;}
}

.show-popup {
display: block;
animation: popup 1s 1 ease-out;
-webkit-animation: popup 1s 1 ease-out;
}    

@keyframes popup { //change to popup
  0% {width: 60px; margin-top: -10px;opacity: 0;}
  20% {width: 60px; margin-top: 0px;opacity: 1;}
  45% {width: 470px;}
  100% {width: 470px;}
}
@-webkit-keyframes popup { //change to popup
  0% {width: 60px; margin-top: -10px;opacity: 0;}
  20% {width: 60px; margin-top: 0px;opacity: 1;}
  45% {width: 470px;}
  100% {width: 470px;}
}

.no-popup {
  display:none !important;
}

` http://codepen.io/NerdOrDie/pen/vNEvee?editors=0110 .

By default the picture drops down and fades in followed by the text shifting right and fading in. I want to change it so after everything fades in wait a couple seconds and then side the text to the left and fade out followed by sliding the picture up and out.

The problem that I ran into was when I tried to edit the key frames to just be mirrored the text didn't display at first and then after the fade out by the logo the text just seems to pop into exsistence for a second before the next animation starts. How would I go about changing this to have the whole animation (both in and out) play properly and then not have the entire thing popping up between animations?

Answer 1

Use the animation-direction css property to indicate whether the animation should play in reverse.

.right {
  ...
  animation-direction: reverse;
}
.show-pop {
  ...
  animation-direction: reverse;
}

You may want to add animation-delay to sync with your next series of images and text.