CSS 过渡未返回原始形状且无法多次单击

Question

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

还有，我只能点击<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 或其他嵌入式编辑器等网站进行调试，因为您看不到哈希值的变化。基本上，单击 link 会将 #elem 附加到 URL，将 :target 样式应用到 .shape，并保持这种状态直到散列更改。

此解决方案使用 :focus，它可以让您更接近目标，但并非完全如此。要重复播放动画，您需要 defocus/blur 圆圈，然后再次单击它。

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

CSS 过渡未返回原始形状且无法多次单击

CSS Transition Not Returning To Original Shape & Can't Click Multiple Times

css

css-transitions