我想仅使用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返回相同的路径?
答案 0 :(得分:4)
尝试使用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>