Solved

Not getting a smooth transition using CSS3 transition property

Posted on 2014-11-11
2
113 Views
Last Modified: 2014-11-11
Hi!
I'm trying to have a header & logo minimize on scroll using jQuery and CSS3. This is occurring at min-width = 960px
I've got the minimizing working, but the CSS transition doesn't seem to be working.

It should work like this demo:

http://callmenick.com/tutorial-demos/resize-header-on-scroll/

Anyone see where I've bungled the code?

http://sandbox.intrepidrealist.com/lucidity-2015/blog/

Thanks!
0
Comment
Question by:Alicia St Rose
2 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40436612
You have to specify the initial height in pixels. height auto wont work. you also need the transition property:

img {
height: 135px;
max-width: 100%;
transition: all .5s;
}

(remember to add vendor prefixes if you are targeting a variety of browsers)
0
 
LVL 7

Author Closing Comment

by:Alicia St Rose
ID: 40436662
Kyle,
Thank you so much. Not only for a working solution, but also for helping shed more light on how these transition properties work!
I learned sumptin!
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question