Menu
I have an element whose width I'd like to animate when its contents change. It has width: auto, and this never changes. I've seen this trick, but that's for transitioning between two values and one is set. I'm not manipulating the values at all, only the content, and I'd like my element's size to change with animation. Is this at all possible in CSS?
Here's a simplified version of my code:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>I'd like the changing size to animate when the user hovers over the element.
733
Width: autoWhen an element has auto as a value for width, it can have margin, padding, and border without becoming bigger than its parent element. The width of its content box will be the content itself with the subtraction of margin, padding, and border.
Transition Width is the maximum distance between the laser line (where OD>6) and the 50% transmission point. Edge Steepness is the actual distance between the place where OD>6 ends and the 50% transmission point.
We can't transition height , but we can transition max-height , since it has an explicit value. At any given moment, the actual height of the element will be the minimum of the height and the max-height .
Transitioning two or more properties You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property. You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.
As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
Stack snippet
.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " \00a0\f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: max-width 1s;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>I think it's useful
const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) => {
e.target.nextElementSibling.classList.toggle("active");
}ul {
background-color: yellow;
overflow: hidden;
transition-duration: 1s;
transition-property: max-height;
height: auto;
max-height: 0;
}
ul.active {
max-height: 600px;
}<button id="expand-btn">Expand</button>
<ul>
<li>Hihi</li>
<li>Hello</li>
<li>Rap star</li>
<li>Hiphop</li>
</ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
