How to make CSS image transition smooth? -
i'm working on blog, , stumbled upon thing fix, i've got no idea how it. when scroll down page, header sticks top , shrinks smaller size. that's how , works.
the logo shrink too, when transition takes place or when drag scrollbar , hold while, logo goes jagged. once stop scrolling logo smoothens again, i'd smooth while transitioning, instead of smoothing áfter transitioning. there way can this, , if so, how?
you can see website here; http://tidychaotic.nl. below picture shows happens:
logo jagged http://imgdump.nl/hosted/fc5448a0f5e23978e6ac1cb32ea7d0ec.png
here code i'm using. #masthead bigger header , #masthead.fixed-header smaller one.
#masthead { background-color: #fff; border-bottom: 1px solid #eee; z-index: 999; width: 100%; -moz-transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; transition: 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); }
oh okay. link , picture included understand wrong.
in fact, what's happenning logo called aliasing , due original width , height of image.
try scaling (resize 177x41px one) , work way want ;-)
Comments
Post a Comment