Question

我可以将宽度从 0px 设置为初始吗？或者它必须是绝对值？

＆＃13;

span {
  background: red;
  animation: scroolDown 1s linear;
  display: inline-block;
}

@keyframes scroolDown {
  from {
    width: 0px;
  }
  to {
    width: initial;
    //width: 130px;//works
  }
}

＆＃13;

<span>asdfdsafsafdsafdsaf</span>

＆＃13;

Answer 1

这是你想要实现的目标吗？

当动画发生背景而不是文字出现以及背景动画延迟时，文本无法显示。

＆＃13;

.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%;
  }
}

＆＃13;

<span class="inner">
  This is a test text for testing the text appearance for this test.
  </span>

＆＃13;

Answer 2

您可以设置最大宽度的动画而不是宽度;如果您将结束宽度设置为您所知道的至少与所需结束宽度一样大的值，它将自动停止以其自然宽度增长！

在这个例子中，我将结束宽度设置为20em，大约是自然尺寸的两倍，并且我还增加了动画时间，因此时间与原来的时间大致相同。

＆＃13;

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 */
  }
}

＆＃13;

<span>asdfdsafsafdsafdsaf</span>

＆＃13;

这种解决方案的概念来自How can I transition height: 0; to height: auto; using CSS?，所以也许我应该将其作为副本关闭。遗憾。

Answer 3

为什么会这样？

当您将width设置为initial时，您确实将width设置为auto（initial value width width 1}}属性）。

此问题可追溯到2007年，当时在WebKit上报告 this bug 。您可以按照该报告的对话进行操作，并查看：

CSS工作组已经解决了转换不会自动运行到/来自自动值。

这是所有主流浏览器的行为，因此在尝试将auto设置为auto时，我们运气不好，我们必须采用现有的解决方法。

解决方法

动画到max-width有一些变通方法，但动画max-height是迄今为止最受欢迎的，因为此前两个答案已经引用了它。

我建议您在此问题的解决方法上看到 this awesome article ，而不是列出并解释此帖子中的变通方法。

总结文章，解决方法是：

使用显式值动画transform
使用scaleX

auto

使用JavaScript实现预期效果
使用Flexbox

如果确实需要动画到$(item).css("display", "none")的功能，那么最好的选择是使用JavaScript制作动画。

CSS动画0px初始不起作用

3 个答案: