Css3 Transition from Width Auto to "N" Px

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

CSS +/- x pixels for width and height animation

No div sizing necessary...

http://jsfiddle.net/5rDar/4

div {
    width: 200px;
    height: 200px;
    background-color: #eee;
    transition: padding .5s;
    padding: 10px;
}
div:hover {
    padding: 15px;
}

Here's a variation where the primary div doesn't transition, but the parent does. This may be more useful depending on your scenario.

http://jsfiddle.net/5rDar/3

div.outer {
    transition: padding .5s;
    padding: 10px;
    position: relative;
}
div.outer:hover {
    padding: 15px;
}
div.inner {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    position: absolute;
}

<div class="outer">
    <div class="inner">
    </div>
</div>

css transition when changing width from 100% to auto using jQuery not working

You cannot do transition to auto you need to use values, so you may try something like this. You specify a width to the element then you change it to the width of the parent container which is having a 100% width:

var w = $('.bar').width();$('.bar').css('width', w);
$(".bar").on('click', function() {  $('.bar').css('width', $("body").outerWidth());})
$(".reduce").on('click', function() {  $('.bar').css('width', w);})

body {  text-align: center;}
.bar {  box-sizing: border-box;  padding: 20px;  background: red;  display: inline-block;  transition: width 1s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="bar">click to expand</div><div class="reduce">click to reduce</div>

How to increase an width:auto DIV's width by X pixels using pure CSS

I saw your fiddle, though I'm not sure this is the exact effect you need, try this:

.myDiv:hover {
    padding-right: 20px; 
}

How to fake width animation with CSS transform?

One posibility is to animate the inner ul in the opposite way.

Begin with a translation of the opposite sign, and end with a zero translation

html, body {    margin:0;    padding:0;    height:100%;}
#menubar {    width: 400px;    -webkit-transform: translateX(-370px);            transform: translateX(-370px);        background-color: #DDDDDD;    height:100%;    overflow:hidden;    -webkit-transition: 1500ms -webkit-transform;            transition: 1500ms transform;}
#menubar:hover, #menubar:hover ul  {    -webkit-transform: translateX(0);            transform: translateX(0);}
ul {    -webkit-transform: translateX(370px);            transform: translateX(370px);        -webkit-transition: 1500ms -webkit-transform;            transition: 1500ms transform;    width: 400px;    margin:0;    padding:0;    list-style-type: none;}
ul li {    width: 100%;    box-sizing: border-box;    padding: 25px 10px;    background-color: #C6C6C6;    font-family: sans-serif;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-align: center;    -webkit-align-items: center;        -ms-flex-align: center;            align-items: center;    margin-bottom:3px;    cursor:pointer;}
ul li:hover {    background-color: #D6D6D6;}
ul li .dot {    width:10px;    height:10px;    border-radius:10px;    background-color: teal;}
ul li .title {    margin-left:15px;}

<div id="menubar">    <ul>        <li><div class="dot"></div><div class="title">Item example</div></li>        <li><div class="dot"></div><div class="title">Item example</div></li>        <li><div class="dot"></div><div class="title">Item example</div></li>        <li><div class="dot"></div><div class="title">Item example</div></li>        <li><div class="dot"></div><div class="title">Item example</div></li>            </ul></div>

CSS transition auto height not working

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

Hope this helps!

.ac-container{    width: 400px;    margin: 10px auto 30px auto;    text-align: left;}.ac-container label{    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;    padding: 5px 20px;    position: relative;    z-index: 20;    display: block;    height: 30px;    cursor: pointer;    color: #777;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);    line-height: 33px;    font-size: 19px;    background: #ffffff;    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         1px 0px 0px 0px rgba(255,255,255,0.9) inset,         0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{    background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{    background: #c6e1ec;    color: #3d7489;    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         0px 2px 2px rgba(0,0,0,0.1);}
.ac-container input{    display: none;}.ac-container section{    background: rgba(255, 255, 255, 0.5);    margin-top: -1px;    overflow: hidden;    max-height: 0px;    position: relative;    z-index: 10;    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{    font-style: italic;    color: #777;    line-height: 23px;    font-size: 14px;    padding: 20px;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{    max-height: 500px; /*auto*/}

<div class="ac-container">    <div>                <input id="ac-1" name="accordion-1" type="checkbox" />        <section class="ac-small">            <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>        </section>        <label for="ac-1">About us</label>            </div>    
<div>            <input id="ac-2" name="accordion-2" type="checkbox" />        <section class="ac-small">            <p>Some content... </p>        </section>        <label for="ac-2">About us</label></div></div>

Using CSS transitions in CSS Grid Layout

According to the spec, transitions should work on grid-template-columns and grid-template-rows.

7.2. Explicit Track Sizing: the grid-template-rows and
grid-template-columns
properties

Animatable: as a simple list of length, percentage, or calc, provided
the only differences are the values of the length, percentage, or calc
components in the list

So, if my interpretation is correct, as long as the only changes are to the values of the properties, with no changes to the structure of the rule, transitions should work. But they don't.

---

UPDATE

This does work but is so far only implemented in Firefox. Follow here
for other browser updates.
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

~ a contribution in the comments by @bcbrian

---

Here's a test I created:

grid-container {  display: inline-grid;  grid-template-columns: 100px 20vw 200px;  grid-template-rows: repeat(2, 100px);  background-color: black;  height: 230px;  transition: 2s;    /* non-essential */  grid-gap: 10px;  padding: 10px;  box-sizing: border-box;}
grid-container:hover {  grid-template-columns: 50px 10vw 100px;  grid-template-rows: repeat(2, 50px);  background-color: red;  height: 130px;  transition: 2s;}
grid-item {  background-color: lightgreen;}

<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

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>

---

Related Topics