需要使用動畫旋轉元素並將其保持在旋轉位置

Question

我試圖弄清楚如何在一定程度上對元素進行動畫處理然後保持該位置。到目前爲止，當我旋轉一個元素進行動畫處理時，它不保持它的旋轉位置，而是在最後重置回它的原始位置。

這裏是一個小提琴，簡而言之，我希望頂部半圓旋轉315度並保持該位置，而不是像它那樣重置到原始位置。

小提琴：https://jsfiddle.net/Lyay1zrd/

.letter-container { 
 
    min-width: 60px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    float: left; 
 
    } 
 
    .s-container { 
 
    div:nth-child(1) { 
 
     width: 70px; 
 
     height: 35px; 
 
     border-radius: 90px 90px 0 0; 
 
     background: red; 
 
     -webkit-animation: rotate-top 4s linear; 
 
    } 
 
    div:nth-child(2) { 
 
     width: 70px; 
 
     height: 35px; 
 
     border-radius: 0px 0px 90px 90px; 
 
     border-top: 1px solid yellow; 
 
     margin: 0px 10px; 
 
     background: red; 
 
    } 
 
    } 
 
    
 
    @-webkit-keyframes rotate-top { 
 
    to { -webkit-transform: rotate(325deg); } 
 
    
 
    }

<div class="s-container letter-container"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 1

可以使用animation-fill-mode值：forwards一旦動畫完成後保存更改。

這裏是一切工作的代碼（ 「desassified」 作爲一個片斷工作）：

.letter-container { 
 
    min-width: 60px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    float: left; 
 
} 
 
.s-container div:nth-child(1) { 
 
    width: 70px; 
 
    height: 35px; 
 
    border-radius: 90px 90px 0 0; 
 
    background: red; 
 
    -webkit-animation: rotate-top 4s linear; 
 
    -webkit-animation-fill-mode: forwards; /* <----this is where the magic happens */ 
 
} 
 
.s-container div:nth-child(2) { 
 
    width: 70px; 
 
    height: 35px; 
 
    border-radius: 0 0 90px 90px; 
 
    border-top: 1px solid yellow; 
 
    margin: 0 10px; 
 
    background: red; 
 
} 
 
@-webkit-keyframes rotate-top { 
 
    to { 
 
    -webkit-transform: rotate(325deg); 
 
    } 
 
}

<div class="s-container letter-container"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

更多信息

有關動畫填充模式的更多信息見下頁：

https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode