汉堡包的菜单位置在动画中的跨度

Question

我想制作汉堡包菜单图标，我的问题是我想要向右侧中间跨度，我不知道该怎么做。

HTML：

<div class="container">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS：

.container {
    position:absolute;
  right: 15%;
  top: 10%;
}

span {
    display: block;
  border: 3px solid black;
  margin: 5px 0;
  width: 40px;
}

.container:hover span:nth-child(2) {
  animation: animation 1s forwards;
}

@keyframes animation {
  to { width: 20px; }
}

示例：https://jsfiddle.net/msds3c4j/

Answer 1

你可以做到

@keyframes animation {
  to { 
    width: 20px; 
    margin-left: 20px;
  }
}

JSFiddle