テキストコンテンツのスムーズなCSS遷移を手助けする必要があります

私はあなたが上に乗るときに2つの追加のリンクが現れるリンク（「リンク」と呼ばれる）にこの素晴らしいCSSトランジションエフェクトを持っています。さらに、「リンク」という言葉自体が「LinkedIn」に変わります。テキストコンテンツのスムーズなCSS遷移を手助けする必要があります

問題は、2つの余分なリンクの不透明度遷移が非常にスムーズであり、 "リンク"から "リンクドイン"へのテキスト遷移が正しくないことです。ただちにホバーをオンに切り替えます。

他のリンクとのマッチングをスムーズにする方法はありますか？ LinkedInへのリンクから何とか退色していますか？

ありがとうございます！

.links { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-left: 5%; 
 
    color: white; 
 
    font-family: 'heebo'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    width: 140px; 
 
} 
 
.links ul { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.linksG { 
 
    color: #F28500; 
 
    text-decoration: none; 
 
    opacity: 0; 
 
    transition: opacity .55s ease-in-out; 
 
    -moz-transition: opacity .55s ease-in-out; 
 
    -webkit-transition: opacity .55s ease-in-out; 
 
} 
 
.linksL:before { 
 
    color: white; 
 
    text-decoration: none; 
 
    content: 'Links'; 
 
    transition: content 1s; 
 
    -moz-transition: content 1s; 
 
    -webkit-transition: content 1s; 
 
} 
 
.linksS { 
 
    color: #D95D39; 
 
    text-decoration: none; 
 
    opacity: 0; 
 
    transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
} 
 
.links:hover .linksG { 
 
    opacity: 1.0; 
 
    transition: opacity .55s ease-in-out; 
 
    -moz-transition: opacity .55s ease-in-out; 
 
    -webkit-transition: opacity .55s ease-in-out; 
 
} 
 
.links:hover .linksS { 
 
    opacity: 1.0; 
 
    transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
} 
 
.links:hover .linksL:before { 
 
    content: 'LinkedIn'; 
 
    text-decoration: none; 
 
    transition: content .55s; 
 
    -moz-transition: content .55s; 
 
    -webkit-transition: content .55s; 
 
}

<body style="background-color: black;"> 
 
    <div class="links"> 
 
    <ul> 
 
     <li> 
 
     <a class="linksG" href="http://github.com">Github</a> 
 
     </li> 
 
     <li> 
 
     <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a> 
 
     </li> 
 
     <li> 
 
     <a class="linksS" href="http://stackoverflow.com">S/Overflow</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

出典

2016-06-28 Nathan R

さてあなたは、テキストを変更しているときに、CSS transitionを使用することはできませんが、あなたは:beforeで他のテキストを追加し、不透明度

.links { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-left: 5%; 
 
    color: white; 
 
    font-family: 'heebo'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    width: 140px; 
 
} 
 
.links ul { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.linksG { 
 
    color: #F28500; 
 
    text-decoration: none; 
 
    opacity: 0; 
 
    transition: opacity .55s ease-in-out; 
 
    -moz-transition: opacity .55s ease-in-out; 
 
    -webkit-transition: opacity .55s ease-in-out; 
 
} 
 
.contentClass{ 
 
    position:relative; 
 
} 
 
.linksL:before { 
 
    position:absolute; 
 
    left:0; 
 
    color: white; 
 
    text-decoration: none; 
 
    content: 'Links'; 
 
    transition: opacity 1s; 
 
    -moz-transition: opacity 1s; 
 
    -webkit-transition: opacity 1s; 
 
} 
 
.linksL:after { 
 
    position:absolute; 
 
    left:0; 
 
    color: white; 
 
    opacity:0; 
 
    text-decoration: none; 
 
    content: 'Linkedin'; 
 
    transition: opacity 1s; 
 
    -moz-transition: opacity 1s; 
 
    -webkit-transition: opacity 1s; 
 
} 
 
.linksS { 
 
    color: #D95D39; 
 
    text-decoration: none; 
 
    opacity: 0; 
 
    transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
} 
 
.links:hover .linksG { 
 
    opacity: 1.0; 
 
    transition: opacity .55s ease-in-out; 
 
    -moz-transition: opacity .55s ease-in-out; 
 
    -webkit-transition: opacity .55s ease-in-out; 
 
} 
 
.links:hover .linksS { 
 
    opacity: 1.0; 
 
    transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
} 
 
.links:hover .linksL:before { 
 
    opacity:0; 
 
    text-decoration: none; 
 
    transition: opacity .55s; 
 
    -moz-transition: opacity .55s; 
 
    -webkit-transition: opacity .55s; 
 
} 
 
.links:hover .linksL:after { 
 
    opacity:1; 
 
    text-decoration: none; 
 
    transition: opacity .55s; 
 
    -moz-transition: opacity .55s; 
 
    -webkit-transition: opacity .55s; 
 
}

<body style="background-color: black;"> 
 
    <div class="links"> 
 
    <ul> 
 
     <li> 
 
     <a class="linksG" href="http://github.com">Github</a> 
 
     </li> 
 
     <li class="contentClass"> 
 
     <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a> 
 
     </li> 
 
     <li> 
 
     <a class="linksS" href="http://stackoverflow.com">S/Overflow</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

とホーブでそれを表示することができます

出典

2016-06-28 06:56:00

テキストコンテンツのスムーズなCSS遷移を手助けする必要があります

答えて

関連する問題