Question

我有一个显示为块的标签。在页面加载时，其宽度由css 动画从零增加到包含div的某个百分比（小提琴包含一个MWE，但此div中有多个链接，每个都有不同的宽度）。在悬停时，我希望它使用CSS 过渡来更改颜色，更改背景颜色，还可以扩展到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

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS转换忽略宽度

1 个答案: