Html 我的动画使w/CSS突然结束

.topnav{
背景：灰色；
}
李托普纳夫先生{
列表样式：无；
颜色：白色；
显示：内联；
填充：10px；
利润率：30像素；
}
李：悬停{
背景色：rgba（255、255、255、0.3）；
过渡定时功能：缓解；
过渡：0.4s；
}

洛勒姆
Ipsum
多洛
坐着
艾米特

您可以将动画（转换）添加到非悬停状态。。。所以它发生在悬停和取消悬停上。请看这里：

.topnav li {
  list-style: none;
  color: white;
  float: right;
  display: inline;
  border: 1px white solid;
  border-radius: 12px;
  padding: 10px;
  position: relative;
  margin: 30px;
  text-align: center;
  transition-timing-function: ease-out;
  transition: 0.4s;
}

li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

---

谢谢！这确实解决了我的问题。但是，每次我刷新页面时，顶部导航栏似乎都会从角落加载动画。在看不到其余代码的情况下，您可以对过渡进行速记，并使其仅影响背景颜色：

transition:background color 0.4s ease out