CSS Transition 不返回到原始形状并且不能多次单击

Question

这是 CodePen .

正方形向右滑动时如预期的那样变成了圆形，但是当它返回到左侧时，它仍然是圆形而不是变成正方形。

另外，我只能点击<a>一次。如果我尝试多次点击，它不起作用。

尝试只使用 CSS(如果可能)。

body {
  margin-top: 30px;
  background: gainsboro;
}
.container {
  margin: auto;
  width: 100%;
}
.path {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80px;
  x-background: white;
}
@keyframes ani {
  0% {
    left: 0;
  }
  50% {
    left: 95%;
  }
  100% {
    left: 0;
  }
}
.shape:target {
  border-radius: 50%;
  transition: all .7s ease-in-out;
  animation-name: ani;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-fill-mode: none;
}
.shape {
  position: absolute;
  left: 0;
  background-color: slateblue;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: none;
  transition: border-radius .4s ease-out;
}

<div class="container">
  <div class="path">
    <a href="#elem"><span id="elem" class="shape"></span></a>
  </div>
</div>

Answer 1

据我所知，使用 CSS 最接近的是:

body {
  margin-top: 30px;
  background: gainsboro;
}
.container {
  margin: auto;
  width: 100%;
}
.path {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80px;
  x-background: white;
}
@keyframes ani {
  0% {
    left: 0;
  }
  50% {
    left: 95%;
  }
  100% {
    left: 0;
  }
}
.path a:focus .shape {
  border-radius: 50%;
  transition: all .7s ease-in-out;
  animation-name: ani;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-fill-mode: none;
}
.shape {
  position: absolute;
  left: 0;
  background-color: slateblue;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: none;
  transition: border-radius .4s ease-out;
}

<div class="container">
  <div class="path">
    <a href="#" tabindex="-1"><span id="elem" class="shape"></span></a>
  </div>
</div>

之前的问题是用:target:触发状态。这很难用 Codepen 或其他嵌入式编辑器等网站进行调试，因为您看不到哈希值的变化。基本上，单击链接会将 #elem 附加到 URL，将 :target 样式应用于 .shape，并保持这种状态直到哈希变化。

此解决方案使用 :focus，它让您更接近您的目标，但不是一直如此。要重复动画，您需要散焦/模糊圆圈，然后再次单击它。

我通常只支持纯 CSS 效果，但我很确定您需要 Javascript。像在点击时应用一个类，等待 2 秒，然后删除该类这样简单的事情会更可靠地实现相同的效果。