On hover, the height is set to height:auto;. When the state of an element is changed, it's pretty cool to have a visual effect to show that an action occurred. Clicking on a see more button will increase the height of the element to show all the contents of the article. That is, when a button is clicked, the height of an element increases or decreases. See more buttons and bootstrap panels make use of this technique. Anyway you should not transitioning height or max-height. So let's revisit our CSS again. Little effects on our web pages can make a lot of difference on the user experience of a website. Then some JavaScript to power up the process. I often use your proposed solution for quick collapses but the only solution if you want perfect collapses involves pure Javascript and Element.scrollHeight property. /* This class is added when button is clicked */, /*Transition time is increased to accomodate the height */, /* if the actual height is 800px it won't Just one thing : it's best to transition using transform instead of height, max-height, width... for better browser performance This is a really common thing to want to do, and when you know the trick it's really easy! That is, when a button is clicked, the height of an element increases or decreases. Transition effects come with some frameworks like Bootstrap and JQuery. This way, any increase or decrease in the height of the element will be accomodated. linearly or quick at the beginning, slow at the end). Using the transition shorthand property, we can actually replace transition-property, transition-duration, transition-timing-function and transition-delay. So first, we'll add an article element to an HTML file. With that said, this also complicates things. We will create a CSS class for this. You have to have a height at the end. That's 60 recalculations per second! The height of an element is one CSS property that often needs to be transitioned. Please add any questions/corrections/extra info below. Sometimes, we want a part of an element to be collapsed until it is needed. The height property sets the height of an element.. This way the animation works and we still get the effect we want. transition: width 2s, height 4s; } This is some content that could be any length. I actually think your solution is great for most use-cases. Cheers. The hack is to transition the max-height property instead of the height property. With max-height you should know the element computed height because if the content have a variable length 1500px may can’t be enough. Please be courteous to other users. The short version is, you can't animate from 0 to auto using transitions. For dynamic content, the height of an element should be set to auto. Let's consider it. The height of an element does not include padding, borders, or margins! See more buttons and bootstrap panels make use of this technique. Built on Forem — the open source software that powers DEV and other inclusive communities. Here's what you'll get. Please leave a comment. We then set the element to have max-height greater than our estimate when the element is expanded. This is computationally expensive considering transitions attempt to animate at 60fps. The starts off at height: 0;. You might think this is the part I say thank you for reading this article. The (pure CSS) solution so far. What we did above works well when the height of the article is known. If you set a custom property to replace the max-height value, with js you can get the actual element height and change the max-height custom property runtime. A Frontend web developer interested in making the web accessible for everyone. Definition and Usage. We have an article that we will collapse at first. Height transition. Without a transition, an element being transformed would change abruptly from one state to another. With translate, you're only affecting the element's appearance. Definition and Usage. To make as easy as possible, I'm putting style and script tags in each section, just before the demo. This works fine, as long as the height of the element isfixed and known. There is a limitation that arises with this method. Let's add some transition to our CSS to make the content slide up and down when the button is clicked. CSS, Animation, Intermediate. In your example, using translate to animate the text will not re-calculate the button's position, so it's not as simple as animating translate as a drop-in replacement. This isn't recommended for production use! It is required to specify the height as numberin the style sheet. We strive for transparency and don't collect excess data. The transition property is a shorthand property used to represent up to four transition-related longhand properties:.example { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; } These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Questions: I am trying to make a slide down using CSS transitions. What happens though when the height of the element is unknown? For instance, when dealing with dynamic content? Transforming a clip-path property may be more performant. If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly..