I'm trying to figure out how to animate an element to a certain degree and then hold that position. So far when I animate an element to rotate, it doesn't hold it's rotated position, but instead resets back to it's original position at the end.
Here's a fiddle, In short I want the top half-circle to rotate 315degree and hold that position, not reset to it's original position like it does.
fiddle: 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>
forwardsjsfiddle.net/Lyay1zrd/1