CSS3 Transition: Animate child to 100% width, parent jumps to 100% width instantly

Question

I am trying to create a delete button, that once you click it, expands to show the delete option, so you won't delete anything by mistake. The problem is that the parent container jumps to full size right away while I would like it to grow gradually. This can be overcome when I set the fixed pixel width for the parent container, but the problem is that I don't always know the width of the contents. Therefor I used a percentage to get it dynamic. I don't really know how to explain it clearly so I've made a fiddle to show you: http://jsfiddle.net/cgHcP/ HTML: ```

x

Remove

x

Remove

``` CSS: ``` /* Roll Button */ div.roll-button { float: right; display: inline; position…

Accepted Answer

The trick to achieving what you want is using `width:auto` on the `.text` and limiting the `max-width` of it.. the new working jsFiddle

```
div.roll-button .text {
    width: auto;
    max-width:0px;
}

div.roll-button:hover .text {
    max-width:100px; /* set this to the maximum allowed value.. */
}
```

CSS3 Transition: Animate child to 100% width, parent jumps to 100% width instantly

Solution

Problem