CSS 过渡忽略宽度

Question

我有一个显示为块的标签。在页面加载时，它的宽度由一个 css animation 从零增加到包含 div 的某个百分比（小提琴包含一个 MWE，但是这个 div 中有多个链接，每个链接都有不同的宽度）。在悬停时，我希望它使用 CSS transition 更改颜色、更改背景颜色并扩展到 div 的 100%。颜色和背景颜色位有效，但似乎忽略了宽度过渡。

片段：

.home-bar {
  text-decoration: none;
  background-color: white;
  color: #5e0734;
  display: block;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
  border: 2px solid #5e0734;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0;
  margin-left: 5px;
  margin-top: 0;
  margin-bottom: 5px;
  padding: 0;
}

.home-bar:hover {
  background-color: #5e0734;
  color: white;
  width: 100%;/*WIDTH IGNORED*/
  text-decoration: none;
}

#bar0 {
  -webkit-animation-name: grow0;
  animation-name: grow0;
}

@keyframes grow0 {
  from {
    width: 0%;
  }
  to {
    width: 75%;
  }
}

<a href="#" id="bar0" class="home-bar">LINK</a>

注意 - 我已经通过更改悬停时链接的高度对其进行了测试，并且它有效。只有宽度不起作用。也许它与页面加载时的动画有关。

Answer 1

当您使用动画设置宽度时，您将覆盖使用 CSS 定义的任何其他宽度，包括悬停定义的宽度。关键帧中的样式比任何其他样式都更具体：

CSS 动画影响计算的属性值。这种效果发生在 将指定值添加到 CSS 级联 ([CSS3CASCADE])（在 CSS 动画的级别）将产生正确的计算值 对于动画的当前状态。如 [CSS3CASCADE]中所定义， 动画会覆盖所有常规规则，但会被 !important 覆盖 规则。 ^ref

一种解决方法是同时考虑宽度/最大宽度属性以避免这种混淆：

.home-bar {
  text-decoration: none;
  background-color: white;
  color: #5e0734;
  display: block;
  animation: grow0 1.5s forwards;
  transition: color, background-color, max-width 0.2s linear;
  border: 2px solid #5e0734;
  max-width: 75%; /*Set max-wdith*/
}

.home-bar:hover {
  background-color: #5e0734;
  color: white;
  max-width: 100%; /* Update the max-width of hover*/
  text-decoration: none;
}

/*Animate width to 100%*/
@keyframes grow0 {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}

<a href="#" id="bar0" class="home-bar">LINK</a>