0

Can I animate width from 0px to initial? Or it has to be absolute value? 

span {
  background: red;
  animation: scroolDown 1s linear;
  display: inline-block;
}

@keyframes scroolDown {
  from {
    width: 0px;
  }
  to {
    width: initial;
    //width: 130px;//works
  }
}
<span>asdfdsafsafdsafdsaf</span>
TheMatt
  • 13
  • 2

3 Answers3

0

Is this what you're trying to achieve?

The text gets unrevealed as the animation occurs with the background instead of text appearing and the background animating with a delay.

.inner {
  display: inline-block;
  height:20px;
  background: #c3c;
  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;
  animation: mymove 3s linear;
}

@keyframes mymove {
  0% {
    max-width: 0px;
  }
  100% {
    max-width: 100%;
  }
}
<span class="inner">
  This is a test text for testing the text appearance for this test.
  </span>
  • Yes, but I want to animate from 0 width to span's default width with **initial**. – TheMatt Dec 03 '17 at 18:10
  • @TheMatt In that case, use JavaScript, as in [this answer](https://stackoverflow.com/a/3149710/1016716). The value of the initial width is `auto`, which has no calculatibility. You also can't say `width: calc(auto + 10px)` for instance. That kind of thing can't be done. You will have to use tricks. – Mr Lister Dec 03 '17 at 18:12
  • You can't make use of initial with a fixed width in this case, or the text would just prompt up without the animation. We're using max-width so the width size can increment its value up until the intial width is reached. –  Dec 03 '17 at 18:12
0

You can animate the max-width rather that the width; if you set the end width to something you know is at least as great as the desired end width, it will stop growing automatically at its natural width!

In this example, I set the end width at 20em, about twice the natural size, and I also increased the animation time, so that the time is about the same as the originally intended one.

span {
  background: red;
  animation: scroolDown 2s linear; /* about twice the expected time */
  display: inline-block;
}

@keyframes scroolDown {
  from {
    max-width: 0px;
  }
  to {
    max-width: 20em; /* about twice the expected size */
  }
}
<span>asdfdsafsafdsafdsaf</span>

The concept for this kind of solution comes from How can I transition height: 0; to height: auto; using CSS?, so maybe I should have closed as a duplicate instead. Sorry.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

Why does this happen?

When you set width to initial, you're really setting the width to auto (which is the initial value of the width property).

This issue dates as far back as 2007, when this bug was reported on WebKit. You can follow the conversation on that report and see:

The CSS WG has resolved that transitions don't run to/from auto values.

This is the behavior for all of the major browsers, so when trying to animate width to auto, we're out of luck and we have to go with an existing workaround.

The Workarounds

There's a few workarounds for animating to auto, but animating max-width is by far the most popular as it was already referenced by the two answers before this.

Rather than listing and explaining the workarounds in this post, I suggest you see this awesome article on the workarounds for this problem.

Summarizing the article, the workarounds are:

  • Animating max-height with explicit values
  • Animate transform with scaleX
  • Use JavaScript to achieve the desired effect
  • Use Flexbox

If you really need the functionality of animating to auto, your best bet is animating with JavaScript.

Christian Santos
  • 5,386
  • 1
  • 18
  • 24