Question

我正在写博客，我偶然发现了一件我想解决的问题，但是我不知道该怎么做。向下滚动页面时，标题会粘到顶部并缩小到较小的尺寸。这就是我喜欢它的方式而且它的工作原理。

徽标也会缩小，但是当转换发生或拖动滚动条并保持一段时间时，徽标会出现锯齿状。一旦你停止滚动徽标再次平滑，但我希望它在过渡时平滑，而不是在过渡后平滑。我有什么方法可以做到这一点，如果有，怎么做？

你可以在这里看到网站; http://tidychaotic.nl。下面的图片显示了会发生什么：

Logo jagged http://imgdump.nl/hosted/fc5448a0f5e23978e6ac1cb32ea7d0ec.png

这是我正在使用的代码。 #masthead是较大的标题，#masthead.fixed-header是较小的标题。

#masthead { 
    background-color: #fff;
    border-bottom: 1px solid #eee;
    z-index: 999;
    width: 100%; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
}

#masthead.fixed-header {
    position: fixed;
    top: 0;
    min-height: 35px; 
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

Answer 1

哦好的。通过链接和你包含的图片，我明白了什么是错误的。

事实上，您的徽标所发生的事情称为锯齿，这取决于图像的原始宽度和高度。

尝试正确缩放（将其调整为177x41px一个），它将按照您想要的方式工作; - ）

Answer 2

这种情况正在发生，因为你的图像按比例缩小并找到一个点，它有一个十进制整数大小，如30.1px，因此是锯齿状。虽然这在现实世界中不会发生，但尝试添加以下内容以帮助您的网站转换更顺畅：

*{transition: all 0s ease-in-out; -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}

这里有一个警告：如果你在其他地方使用过渡，你可能需要重新定义一些属性，但如果你把它放在开头，你就可以了。或者你可以“杀死”转换属性并保留转换，对于使用转换的任何站点，这种方式几乎都应该是默认的，因为它只是通过硬件加速转换

Answer 3

我真的不明白你想要达到的目标。

也许：http://codepen.io/anon/pen/mlaeJ？

.item{
    transition-property(width);
    transition-duration(500ms);
    transition-timing-function(ease);
    width: 200px;
}

.item.shrinked{
    width: 100px;
}

如何使CSS图像过渡流畅？

3 个答案: