向此动画添加淡出答案

【问题标题】：Adding the fade out to this animation向此动画添加淡出
【发布时间】：2016-11-02 10:59:56
【问题描述】：

所以我找到了一个非常酷的社交链接动画，我想对其进行修改，以便能够使其也淡出。原代码在这里：

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

默认情况下，图片会下降并淡入，然后文本向右移动并淡入。我想更改它，以便在所有内容淡入后等待几秒钟，然后将文本向左并淡出，然后滑动图片向上和向外。

我遇到的问题是，当我尝试编辑关键帧以进行镜像时，文本起初没有显示，然后在徽标淡出之后，文本似乎突然出现了一秒钟在下一个动画开始之前。我将如何更改它以使整个动画（进出）正常播放，然后在动画之间不弹出整个动画？

【问题讨论】：

标签： javascript jquery css sass

【解决方案1】：

使用animation-direction css 属性来指示动画是否应该反向播放。

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

您可能希望添加动画延迟以与您的下一系列图像和文本同步。

【讨论】：