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

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

将淡出添加到此动画中

1 个答案: