需要帮助 CSS 文本内容的平滑过渡

Question

我在 link（称为 "Links"）上获得了这种很酷的 CSS 过渡效果，当您将鼠标悬停在它上面时会出现两个额外的 link。最重要的是，单词 "Links" 本身变为 "LinkedIn"。

问题是，两个额外的 link 的不透明度过渡非常平滑，而 "Links" 到 "LinkedIn" 的文本过渡不是。它会立即切换到悬停状态。

有什么方法可以让它更顺畅地匹配其他 link 吗？以某种方式从指向 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://whosebug.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

Answer 1

当您更改文本时，您不能使用 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://whosebug.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

需要帮助 CSS 文本内容的平滑过渡

Need help getting smooth CSS transition of text content

html

css

hyperlink

hover

css-transitions