Question

我正在尝试使用CSS在5秒内使子div在父div（在激活时）内从一个像素缓慢扩散到另一个像素。一定是可能的，对吗？我试图这样做的方式不起作用。

#parent {
  background: black;
  height: 10px; 
  width: 300px; 
  z-index: 1;
}

#child{
  background: white;
  z-index: 2;
  height: 10px;
  width: 10px;
  transition: width 5s ease-out; 
}
  
#parent:active #child{
  max-width: 290px;
  transition: max-width 5s ease-in;
}

<div id='parent'>
  <div id='child'></div>
</div>

Answer 1

您可以选择在活动状态下更改width或max-width，因此在转换过程中，您可以指定要更改的内容。在您的代码中，您定义了固定width，然后您正在更改max-width，但由于宽度仍然相同，因此无法执行任何操作。

#parent {
  background: black;
  height: 10px; 
  width: 300px; 
  z-index: 1;
}

#child{
  background: white;
  z-index: 2;
  height: 10px;
  max-width: 10px;
  transition: max-width 5s ease-out; 
}
  
#parent:active #child{
  max-width: 290px;
}

<div id='parent'>
  <div id='child'></div>
</div>

CSS转换父div中子div的宽度

1 个答案: