將淡出效果添加到此動畫中

Question

因此，我找到了一個非常酷的社交鏈接動畫，我想對其進行修改，以便能夠使其淡出。 原始代碼在這里：

.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 。

默認情況下，圖片會掉落並漸隱，然后文本向右移並漸入。我想對其進行更改，以便在所有漸隱之后等待幾秒鍾，然后將文本向左傾斜並漸隱，然后向上滑動圖片出來。

我遇到的問題是，當我嘗試將關鍵幀編輯為僅被鏡像時，該文本最初並未顯示，然后在徽標淡出之后，該文本似乎在下一幀之前突然出現了一段時間動畫開始。 我將如何更改此設置以使整個動畫（從內到外）都能正常播放，然后在動畫之間不彈出整個動畫？

Answer 1

使用animation-direction css屬性指示動畫是否應反向播放。

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

您可能需要添加動畫延遲，以與下一組圖像和文本同步。