如何使用 CSS 计时功能为弧线设置动画？答案

【问题标题】：How to use CSS timing functions to animate an arc?如何使用 CSS 计时功能为弧线设置动画？
【发布时间】：2016-04-21 07:24:54
【问题描述】：

我只想使用 CSS 为对象设置动画，使其沿弧线移动并在返回的路上遵循相同的路径。

这是我到目前为止的内容（简化）。 Full JSfiddle

<div class="container">
    <div class="outer">
       <div class="inner"></div>
    </div>
</div>

.outer { transition: all 1.5s ease; }
.inner { transition: all 1.5s cubic-bezier(0.000, 0.590, 0.460, 1.005); }

.container:hover .outer { transform: translateY(180px); }
.container:hover .inner { transform: translateX(180px); }

如您所见，第一部分正在按照我的意愿工作。它以凸外圆弧向下移动。但是当它返回时，它会以内凸弧的形式返回。我怎样才能让它只使用 CSS 在相同的路径上返回？

【问题讨论】：

你的意思是像this这样的东西吗？

标签： css animation transition

【解决方案1】：

尝试使用rotateZ 来旋转垂直元素，类似于下面的解决方案。注意需要将top 设置为-20px 以使旋转的元素保持在容器的边界内，以及transform-origin 用于将旋转点设置为元素的左下角。

.container { 
  font-size: 0;
  height: 180px;
  width: 180px; 
  border: 1px solid tomato;
}

.outer {
  transform-origin: 0 100%;
  display: inline-block;
  width: auto;
  height: 100%;
  position: relative;
  top: 0;
  transition: all 1.5s cubic-bezier(0, .59, .46, 1);

  /* border added to better visualize behaviour */
  border: 1px dashed blue;
  box-sizing: border-box;
}
.inner {
  display: inline-block;
  height: 20px;
  width: 20px;
  background: tomato;
  border-radius: 50%;
}

.container:hover .outer {
  /* -2px added because of blue border */
  /* without the border this would be the same as -1*(.inner's width) */
  top: -22px;
  transform: rotateZ(90deg);
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

【讨论】：

它的优点是它实际上遵循了一条弧线，而原始过渡则没有。