CSS動畫的div移動到頂部，然後到中心

Question

我試圖做一個CSS動畫（我不能使用JavaScript）通過以下步驟：

1. 有一個div其中，你不能預先知道其位置或大小（在小提琴我已設置用於測試的大小）

2. 在div被調整大小（寬度100％的高度50個像素），並移動到頁面的頂部，而其內容消失

3. 該div變成一個圓圈並移動到該中心

這是我迄今爲止嘗試頁：

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; 

}

要：

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％轉換的關鍵幀。這應該平滑過渡一點。