Bir öğeyi animasyonla döndürmeniz ve

Question

döndürülmüş konumda tutmanız gerekiyor Bir öğenin belirli bir dereceye kadar nasıl hareketlendirileceğini anlamaya çalışıyorum ve sonra bu konumu tutun. Şu ana kadar bir öğeyi döndürmek için canlandırdığımda, döndürülmüş konumu tutmuyor, bunun yerine sonunda orijinal konumuna geri dönüyor.

İşte bir keman, Kısacası üst yarım dairenin 315 derece döndürmesini ve bu konumu tutmasını, tıpkı orijinal konumuna sıfırlamasını istemiyorum.

keman: animasyon bittikten sonra değişiklikleri korumak 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

Sen animation-fill-mode değerini kullanabilirsiniz. animasyon-doldur-kip hakkında daha fazla bilgi için

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

Fazla Bilgi

: Burada

(bilgi parçacıkları olarak çalışmaya "desassified") çalışma her şey kodudur aşağıdaki sayfaya bakın:

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