css - 使文本过渡平滑

Question

嘿，我正在建立我的网站，但遇到了问题。

这是我的网站： http: //legacybydesign.tv/webdesign/index.html

当您接管菜单时，它会消耗。但是文字跳了，不知道你能不能让它更流畅一些？

Answer 1

您实际上需要将过渡添加到悬停状态，并为行高和背景设置动画。我还建议您将速度更改为 0.3 秒

.inactive:{
    height: 5.083em;
    line-height: 5.083em;
    padding: 0 2.618em 0 1.618em;
    border-bottom: 0.09em solid rgba(255, 234, 173, 0.1);
    -webkit-transition: height .3s ease, line-height .5s ease;
    -moz-transition: height .3s ease, line-height .5s ease;
    -o-transition: height .3s ease, line-height .5s ease;
    transition: height .3s ease, line-height .5s ease;
}

.inactive:hover{
    background-color: #ca0012;
    height: 6.853em;
    line-height: 6.853em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Answer 2

您仅在height属性上设置动画，但您也在更改 line-height。尝试将animation属性更改.inactive为此：

transition: height 0.5s ease-out, line-height 0.5s ease-out; 
-webkit-transition: height 0.5s ease-out, line-height 0.5s ease-out; 

Answer 3

适用ease-in-out于H2和类不活跃

.inactive {
height: 5.083em;
line-height: 5.083em;
padding: 0 2.618em 0 1.618em;
border-bottom: 0.09em solid rgba(255, 234, 173, 0.1);
transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
}

.inactive h2 {
color: white;
font-weight: 100;
text-align: right;
-webkit-transition: all 500ms ease-in-out;
}