Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Not getting a smooth transition using CSS3 transition property

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

719 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