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
Solved

Not getting a smooth transition using CSS3 transition property

Posted on 2014-11-11
2
114 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

Suggested Solutions

Title # Comments Views Activity
Customizing jQuery UI Accordion CSS 3 28
innerHTML 7 34
Not allowed to load local recource. 4 34
Hide un-named HTML Label with CSS 14 36
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

789 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