CSS анимации для перемещения DIV вверх, а затем к центру

Question

Я пытаюсь сделать CSS анимации (я не могу использовать JavaScript) с этими шагами:

1. Have A DIV из которых вы не можете заранее знать его положение или размер (в скрипку я установить размер для тестирования)

2. ДИВ получает изменения размера (ширина 100% высоты 50 пикселей) и движется к верхней части страницы, а ее содержание исчезает

3. Диверт превращается в круг и перемещается в центр страница

Это то, что я попытался так далеко:

https://jsfiddle.net/v3bt1mar/5/

.turning { 
    width: 80%; 
    height: 120px; 
    background-color: #00FF00; 
} 
.turning:active { 
    background: red; 
    animation: 10.5s; 
    display: block !important; 
    position: fixed; 

    content: ""; 
    overflow: hidden; 
    animation: resizeList 10.5s forwards; 
} 
.turning:active * { 
    animation: fadeContent 1s forwards; 
} 
@keyframes fadeContent { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes resizeList { 

    25% { 
    width: 100%; 
     height: 50px; 
     top: 10px; 
     left: 0%; 
     // transform: translate(0%, 0%) rotateY(0deg); 
     border-radius: 0%; 
    } 
    100% { 
     border-radius: 50%; 
     top: calc(50% - 50px); 
     left: calc(50% - 50px)"; 
     // transform: translate(~"calc(50vw - 50px)", ~"calc(50vh - 50px)") rotateY(180deg); 
     transform: rotateY(180deg); 
    width: 100px; 
     height: 100px; 
    } 
} 

Но это еще далеко от того, что я ожидал.
В Mozilla он не перемещается вертикально, на Chrome он перемещается, но не гладко (только на каждом ключевом кадре, по-видимому)
Тогда я не знаю, почему он перемещается влево, а не в центр страницы кроме того, она работает по-разному на Mozilla и Chrome (на Mozilla не перемещается к вершине, на Chrome это делает, но не гладко)

Answer 1

Фактическая проблема заключалась в том, что она была скопирована из меньшего файла и содержала комментарии к одной строке, которые не допускаются в обычный CSS. Кроме того, я оставил calc в виде строки, так что LESS не будет суммировать значения при разборе

С некоторыми настройками, взятыми из других ответов, мне удалось зафиксировать анимацию так, как я хотел (поворот был предназначен , я просто не думаю, что стоит упомянуть)

https://jsfiddle.net/v3bt1mar/12/

.turning { 
    width: 80%; 
    height: 120px; 
    background-color: #00FF00; 
} 
.turning:active { 
    background: red; 
    display: block !important; 
    position:fixed; 

    overflow: hidden; 
    animation: resizeList 1s forwards; 
    top:calc(50% - 50px); 
    left: 0; 
} 
.turning:active * { 
    animation: fadeContent 1s forwards; 
} 
@keyframes fadeContent { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes resizeList { 

    25% { 
    width: 100%; 
     height: 50px; 
     top: 10px; 
     left: 0%; 
     border-radius: 0%; 
    transform: rotateY(0deg); 
    } 
    100% { 
     border-radius: 50%; 
     top: calc(50% - 50px); 
     left: calc(50% - 50px); 
     transform: rotateY(180deg); 
    width: 100px; 
     height: 100px; 
    } 
} 

Answer 2

Если добавить position:absolute; в .turning и удалить преобразование поворота в ключевом кадре , анимация делает то, что вы описываете: https://jsfiddle.net/v3bt1mar/7/

Answer 3

Изменить:

100% { 
    border-radius: 50%; 
    top: calc(50% - 50px); 
    left: calc(50% - 50px)"; 
    // transform: translate(~"calc(50vw - 50px)", ~"calc(50vh - 50px)") rotateY(180deg); 
    transform: rotateY(180deg); 
width: 100px; 
    height: 100px; 

}

To:

100% { 
    border-radius: 50%; 
    top: calc(50% - 50px); 
    left: 50%; 
    // transform: translate(~"calc(50vw - 50px)", ~"calc(50vh - 50px)") rotateY(180deg); 
    transform: rotateY(180deg); 
width: 100px; 
    height: 100px; 

}

Это будет держать изображение в центре. Также попробуйте добавить ключевые кадры для перехода на 50% и 75%. Это должно сгладить переход немного.