Как использовать функции синхронизации времени для анимации дуги?

Question

Я хотел бы использовать 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?

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