Question

我对CSS过渡很陌生，对概念的理解和实践较少。但不知何故，我设法在site的徽标上进行了转换。如果你好好看看，你会看到在页面滚动时，徽标图像的宽度随着过渡而减小。但它有点振动/弹性。它应该是平稳过渡。

这是css

#header.sticky, #site-logo a img, #site-logo a{
transition: all 0.5s ease-in-out 0s;
}

#header.sticky #site-logo a img, #header.sticky #site-logo a{
transition:all 1s ease-in-out 0s;
width:90%;
}

如果有人指出我正在做的错误会很好吗？

Answer 1

虽然我看不到太多＆＃39;弹跳＆＃39;尝试使用线性平衡缓动并仅转换所需的属性。即

 #header.sticky, #site-logo a img, #site-logo a{
        transition: width 500ms linear;
    }

    #header.sticky #site-logo a img, #header.sticky #site-logo a{
        transition:width 1000ms linear;
        width:90%;
    }

此外，您只希望转换属性处于初始状态。你不需要它，例如

#element{
    opacity:0.5;
    transition:opacity 200ms linear;
}

#element:hover{
    opacity:1;
}

您只需在transition上添加#element，当元素悬停时，它将转换为新的/默认不透明度。您不需要将transition属性添加到

Answer 2

想出来。命中和试验工作。实际上是“0.5s”和“1s”因素（过渡持续时间）导致徽标像振动一样传递。这解决了我的问题

#header.sticky, #site-logo a img, #site-logo a{
 transition: all 0.3s ease-in-out 0s;
}

#header.sticky #site-logo a img, #header.sticky #site-logo a{
 transition:all 0.3s ease-in-out 0s;
 width:90%;
}

Answer 3

您可以使用：

   #header.sticky, #site-logo a img, #site-logo a{
      transition: width 0.3s linear 0s;
    }
    #header.sticky #site-logo a img, #header.sticky #site-logo a{
        transition: width 1s linear 0s;
        width:90%;
   }

CSS过渡 - 减少宽度是有弹性的 - 摆脱有弹性的过渡

3 个答案: