Animate Div to 100% width css

Question

Problem

I am trying to animate a div to 100% of it's child's width. I'm animating the max width on hover, but it is pushing the div to it's right away very abruptly instead of animating it smoothly to the right. Can anybody see why it isn't animating correctly? I would prefer not to use javascript if possible.

My Attempt

I have copied the fiddle below:

http://jsfiddle.net/tVHYg/1662/

into the following source

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .3s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:100%;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

Tasos · Accepted Answer · 2016-02-16T01:28:53.993

3

The percent is the issue in regards to your code and probably because you have width: 100%; while at the same time you have max-width: 50px; for the inner class .

Using pixels fixes that. any pixels over the size of the boxes will simply animate it faster e.g max-width: 1000px; will just speed up the animation without enlarging the box boundaries

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .5s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:1250px;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

edited Feb 16 '16 at 01:28

answered Feb 16 '16 at 00:04

Tasos

5,321
1
15
26

But this creates a new problem where if you set the max width to be too large, the animation will take a while to start won't it? – user2662833 Feb 16 '16 at 01:17
@user2662833 -- not when it starts but when it comes back to the original size -- i modified to max-width:1250px; to see -- idealy you need the exact width in pixels and not larger – Tasos Feb 16 '16 at 01:29
Yes, but this is a problem in my use case, because I will not know the widths of the divs apriori. This is exactly what I wanted to do, but I wasn't sure how to make it work for any sized div. – user2662833 Feb 16 '16 at 02:44
@user2662833 -- if you dont know the width then you can get it with javascript -- http://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div-using-raw-javascript -- the set the css -- http://www.w3schools.com/js/js_htmldom_css.asp – Tasos Feb 16 '16 at 04:24
Yes, I'm aware of that. I just wanted to avoid using javascript if at all possible. – user2662833 Feb 16 '16 at 05:33

score 1 · Answer 2 · answered Feb 16 '16 at 00:01

1

You can do this with display: inline-flex

.container {
  display: inline-flex;
}

.contents {
  display: inline-flex;
  transition: all .3s ease-in;
  overflow: hidden;
  width: 50px;
  margin: 2px;
}

.inner {
  background:#c3c;
  white-space:nowrap;
  padding: 10px 0;
}

.contents:hover {
  transition-delay: 0.2s;
  width: 100%;
}

<div class="container">
  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>

  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>
</div>

answered Feb 16 '16 at 00:01

Nenad Vracar

118,580
15
151
176

that produces a gap between the boxes and if you also hover on the right box it pushes the left box a bit to the left. – Tasos Feb 16 '16 at 00:29
Yes, it still seems to push the boxes around (and the gap between the boxes seems to increase) – user2662833 Feb 16 '16 at 00:31

Animate Div to 100% width css

Problem

My Attempt

2 Answers2