このアニメーションにフェードアウトを追加する

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

です。

デフォルトでは、画像がドロップダウンしてフェードインし、次にテキストが右にシフトしてフェードインします。すべてをフェードインしてから数秒待ってから、テキストを左にフェードアウトしてから、画像を上下にスライドさせる。

私が遭遇した問題は、テキストが最初に表示されなかったキーフレームを編集しようとしたときと、ロゴがフェードアウトした後にテキストがちょうど次のアニメーションが始まる前に2秒間です。どのようにアニメーション全体（内と外）が正しく再生され、アニメーションの間に全体が現れないようにするためにこれを変更するつもりですか？

Answer 1

animation-direction cssプロパティを使用して、アニメーションを逆に再生するかどうかを指定します。

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

アニメーション遅延を追加して、次の一連のイメージとテキストと同期させたい場合があります。