How to Transition Width of Content With Width: Auto

How can I transition width of content with width: auto?

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>

CSS width transition without auto

Width auto and a fixed width can't be animated. What you can do is change the max-width.

.element{
   max-width: 0;
   width: 0;
   transition: your transition style
}
.element.active{
   max-width: 9999px;
   width: auto;
}

I'll hope this helps

How to animate dynamic width content?

You can do this with a keyframe animation. The key is setting a max-width greater than how big the element will be. Note that the animation timing takes into account the total max-width.

CSS

.test {
  animation-name: test;
  animation-duration: 1s;
  animation-direction: forwards;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes test {
  0% {
    max-width: 0;
  }
  100% {
    max-width: 200px;
  }
}

and then you need to add the class to your dynamic object

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Hide" : "Show"}
      </button>
      {isOpen && <div class='test'>Dynamic Content</div>}
      <input type="text" />
    </div>
  );
}

You can toggle the animation duration and make it happen on removal too if you want but I'll leave it to you to play with.

https://codesandbox.io/s/6wj6z1ppxr

CSS width transition not working when originally setting width to fit-content

Your assumption/expectation about width: fit-content seems reasonable to me. Until someone can explain better, you could use width: fit-content along with min-width: 0, then animate min-width. It's not perfect, since the animation begins at 0 (you may notice a slight delay)

* {
  font-family: sans-serif;
}

div:not(#container) {
  width: fit-content;
  min-width: 0;
  background-color: green;
  color: white;
  margin-top: 1em;
  padding: 1em;
  transition-property: min-width;
  transition-duration: 1s;
}

#ease {
  transition-timing-function: ease;
}

#linear {
  transition-timing-function: linear;
}

#ease-in {
  transition-timing-function: ease-in;
}

#ease-out {
  transition-timing-function: ease-out;
}

#in-out {
  transition-timing-function: ease-in-out;
}

#container:hover div {
  min-width: 90%;
}

<html>
  <head>
    <title>CSS animations</title>
  </head>
  <body>
    <div id="container">
      <div id="linear">
        <p>
          Linear
        </p>
      </div>
      <div id="ease">
        <p>
          Ease
        </p>
      </div>
      <div id="ease-in">
        <p>
          In
        </p>
      </div>
      <div id="ease-out">
        <p>
          Out
        </p>
      </div>
      <div id="in-out">
        <p>
          In-out
        </p>
      </div>
    </div>
  </body>
</html>

How to animate width/height changes due to content changes?

You need to use a mask wrapper to the #content and apply the css transition to it and with Javascript change it's height. You need to get the new height from the #content everytime you append new content (height changes).

var $contentMask = $('#contentMask');var contentBoxId = '#content';var currentHeight = getCurrentHeight(contentBoxId);$contentMask.css('height', currentHeight);
$('#btn').on('click', function() {  $(contentBoxId).append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>");  currentHeight = getCurrentHeight(contentBoxId);  $contentMask.css('height', currentHeight);});
function getCurrentHeight(selector) { return $(selector).height();}

#content {  background-color: yellow;}#contentMask {  overflow: hidden;  transition: height 1s ease;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="contentMask">  <div id="content">    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p>  </div></div>
<button id="btn">click me</button>

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

I think I've got it.

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}



.wrapper:hover .contents .inner {
   
    width:100%;
}

<div class="wrapper">
    <span class="label">+</span>
    <div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

CSS transition does not work on input width

You can't transition using width: auto (Which is the default as you have not specified a width), your element needs an initial width to be defined.

.expand input[type = "text"], 
.expand input[type = "password"]{
    border: 2px solid rgb(0, 119, 255);
    border-radius: 30px;
    background: none;
    transition: 0.25s;
    width: 100px; /* New CSS */
}

.expand input[type = "text"]:hover,
.expand input[type = "password"]:hover{
    width: 210px;
    border-color: rgb(47, 255, 57);
}

<form>
  <h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
  <div class="center">
    <div class="expand">
      <input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
    </div>
  </div>
</form>