CODEWITHSUNDEEP
csstransition
user3350667
user3350667

Reputation: 23

How to make CSS image transition smooth?

I'm working on a blog, and I stumbled upon a thing I would like to fix, however I've got no idea how to do it. When you scroll down the page, the header sticks to the top and shrinks to a smaller size. That's how I like it and it works.

The logo does shrink too, however when the transition takes place or when you drag the scrollbar and hold it for a while, the logo goes jagged. Once you stop scrolling the logo smoothens again, but I'd like it to be smooth while transitioning, instead of smoothing áfter transitioning. Is there any way I can do this, and if so, how?

You can see the website here; http://tidychaotic.nl. Below is a picture that shows what happens:

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

Here is the code I'm using. #masthead is the bigger header and #masthead.fixed-header is the smaller one.

#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);
}

Upvotes: 0

Views: 4072

Answers (3)

Devin
Devin

Reputation: 7720

this is happening because your image shrinks proportionally and finds a point where it has a decimal integer size, like 30.1px, hence the jagging. While this won't happen in real world try adding the following to help your site transitions run smoother:

*{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);}

there's a caveat here: if you use transitions somewhere else, you may need to redefine some property, but if you place it at the beginning, you'll be OK. Or you can "kill" the transition property and just leave the transform, which either way should be almost default for any site using transitions since it simply makes accelerate transitions by hardware

Upvotes: 1

Nathan Peixoto
Nathan Peixoto

Reputation: 328

Oh okay. With the link and the picture you included I understand what is wrong.

In fact, what's happenning to your logo is called aliasing and it is due to the original width and height of your image.

Try scaling it properly (resize it to 177x41px one) and it will work just the way you want ;-)

Upvotes: 2

Nathan Peixoto
Nathan Peixoto

Reputation: 328

I don't really understand what you want to achieve.

Maybe that: http://codepen.io/anon/pen/mlaeJ ?

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

.item.shrinked{
    width: 100px;
}

Upvotes: -2

Related Questions