元素有延迟和抽搐后动画

Question

我正在尝试为 header 中的菜单项设置行为，如下所示：http://www.germanamericanconference.org/partners/。当悬停在元素上时，有一个来回滑动的栏。在我的例子中，我不能向我的 header 添加另一个元素，这样的效果应该是纯粹的 CSS 所以我使用 after pseudo-element.

此处，在示例中：https://jsfiddle.net/1czmx08y/

如您所见，在项目之间移动时会有延迟，但即使我减少过渡时间，它也会开始抽动。

我怎样才能避免这种行为？我觉得我的过渡是错误的。

Answer 1

将所有的过渡改为0.15s或0.18s；现在不是好多了？我认为它会更好，它可能是比使用插件或更多 css 或任何 js 更好的选择。

html {
  font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
  font-size: 1.2em;
  background: #eee;
}

ul {
  position: relative;
  width: 27em;
  height: 2em;
  margin: 100px auto;
  padding: 0;
  white-space: nowrap;
}

ul li {
  display: inline;
  text-align: center;
}

ul li a {
  position: relative;
  top: 0;
  left: 0;
  right: 25em;
  bottom: 0;
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .4em .2em;
  color: #09C;
  text-decoration: none;
  text-shadow: 0 1px 0 white;

  /*transition*/
  -webkit-transition: width .3s,right .3s;
  -moz-transition: width .3s,right .3s;
  -o-transition: width .3s,right .3s;
  transition: width .19s,right .19s;
}

ul li:nth-child(1) a { width: 2em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }

ul li:last-child a::after {
  content: "";
  position: absolute;
  right: inherit;
  bottom: -3px;
  width: inherit;
  height: 3px;
  background: #ccc;
  pointer-events: none;
  /*transition*/
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .19s ease;
}

ul li:nth-child(1) ~ li:last-child a {
  right: 25em;
  width: 2em;
}

ul li:nth-child(2):hover ~ li:last-child a {
  right: 21em;
  width: 4em;
}

ul li:nth-child(3):hover ~ li:last-child a {
  right: 17em;
  width: 4em;
}

ul li:nth-child(4):hover ~ li:last-child a {
  right: 5em;
  width: 12em;
}

ul li:nth-child(5):last-child:hover a {
  right: 0;
  width: 5em;
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { background: #c351fa; }

ul li:last-child a {
  min-width: 5em;
  max-width: 5em;
}

ul li a:hover,
ul li a:focus {
  color: #c351fa;
  background-color: rgba(255,255,255,.6);

  /*transition*/
  -webkit-transition: width .3s,right .3s,background-color .3s;
  -moz-transition: width .3s,right .3s,background-color .3s;
  -o-transition: width .3s,right .3s,background-color .3s;
  transition: width .19s,right .19s,background-color .19s;
}

ul li a:focus { border-bottom: 3px solid #c351fa; }

<ul>
   <li><a href="#"> &#10047; </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Consectetur adipisicing </a></li><!--
--><li><a href="#"> Sit amet </a></li>
 </ul>

元素有延迟和抽搐后动画

Animated after element has delay and twitching

css

animation

transition

pseudo-element

css-transitions