如何使用CSS定时函数来激活一个弧?

I would like to use CSS only to animate an object to move in an arc and follow the same path on the way back.

我只希望使用CSS使一个对象动画化，使其以弧线移动，并沿着相同的路径返回。

Here is what I have so far (simplified). Full JSfiddle

这是我到目前为止所得到的(简化)。满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); }

As you can see the first part is working how I want it. It moves down in a convex outer arc. But when it comes back in, it's coming back in a convex inner arc. How can I get it to return on the same path using only CSS?

正如你所看到的，第一部分是我想要的。它沿着一个凸起的外弧线向下移动。但是当它回来的时候，它回来的时候是一个凸起的内弧线。如何使用CSS使它返回相同的路径?

1 个解决方案

#1

Try rotating a vertical element using rotateZ instead, similar to the solution below. Note the need to set the top to -20px in order to keep the rotated element within the boundaries of the container, as well as transform-origin used to set the rotation point to the bottom left corner of the element.

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

.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>