?
Solved

Not getting a smooth transition using CSS3 transition property

Posted on 2014-11-11
2
Medium Priority
?
133 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 2000 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 8

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

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

592 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