CSS animation for moving div to top and then to center - css

Question

I am trying to make a CSS animation (i can't use javascript) with these steps:
Have a div of which you can't know in advance its position or size (in the fiddle i have set the size for testing)
The div gets resized (width 100% height 50 pixels) and moves to the top of the page while its content disappears
The div turns into a circle and moves to the center of the page
This is what i have attempted so far:
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;
}
}
But it's still far from what i am expecting.
On Mozilla it doesn't move vertically, on Chrome it does move but not smoothly (just at every keyframe, apparently)
Then i don't know why it moves back to the left rather than to the center of the page
On top of that it works differently on Mozilla and Chrome (on Mozilla it doesn't move to the top, on Chrome it does but not smoothly)

Answer 1

If you add position:absolute; to .turning and remove the rotate transformation in the keyframe, the animation does what you are describing: https://jsfiddle.net/v3bt1mar/7/

Answer 2

Change:
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;
}
This will keep image at center. Also try adding keyframes for 50% and 75% transition. That should smooth out the transition a bit.

Answer 3

The actual issue was that it was copied from a less file and it contained single line comments which are not allowed into normal CSS. On top of that i had left calc as a string so that LESS won't sum the values while parsing
With a few adjustments taken from the other answers i managed to fix the animation the way i wanted (the rotate was intended, i just didn't think it was worth mentioning)
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;
}
}