Solved

Not getting a smooth transition using CSS3 transition property

Posted on 2014-11-11
2
119 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

635 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