动画CSS中的边框

Question

我有一个导航菜单,其边框底部有3个像素,所以它的外观类似于下划线.我有2个动画,但我不知道如何包括它们.要么边框从0.0不透明度渐变到1(完整)不透明度.或者从左到右显示边框即绘制自己.

nav li:hover {
    border-bottom: 1px solid orange;
    padding-bottom: 3px;
    animation-name: navhover;
    animation-duration: 3.3s;
}

@-webkit-keyframes navhover {
1% { 
    opacity: 0;
}

100% { 
    opacity: 1;
}

}

任何答案将不胜感激!感谢您的时间.

Answer 1

我会说,在你的情况下,你可能想要转换,而不是动画.就个人而言,我会说如果你可以使用转换而不是动画,你应该使用转换.只有在无法通过转换执行所需操作时才使用动画.

在悬停时更改边框颜色很简单:

.my-element {
  border-bottom: 1px solid transparent;
  transition: border-color 300ms;
}

.my-element:hover {
  border-color: orange;
}

如果您希望边框的动画宽度为0到100%,则不能使用边框.但是你可以使用一个伪元素:

.my-element::after {
  content: " ";
  display: block;
  width: 0;
  height: 2px;
  background: orange;
  transition: width 300ms;
}

.my-element:hover::after {
  width: 100%;
}

我已经创建了一个可以在这里查看的演示:https://jsfiddle.net/65pceLrp/

不要忘了,你还需要供应商前缀的与过渡-webkit-transition,-moz-transition等等.