アニメーションを含む要素を回転させ、回転した位置に保持する必要があります

Question

要素をある程度アニメーション化し、その位置を保持する方法を理解しようとしています。これまでは、要素を回転させるようにアニメーションを作成すると、回転する位置は保持されませんが、最後に元の位置にリセットされます。

ここではフィドルです。つまり、上半分の円が315度回転してその位置を保持し、元の位置にリセットされないようにします。

フィドルは：アニメーションが完了したら、変更を保存するようにforwards：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値を使用することができます。アニメーション・フィル・モードに関する詳細については

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

詳細情報

：ここ

は（スニペットとして動作する "desassified"）作業のすべてを持つコードであります次のページを参照してください。

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