Need to rotate an element with an animation and hold it in the rotated position

Question

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>

Use `forwards` https://jsfiddle.net/Lyay1zrd/1/ – Zach Saucier Apr 05 '16 at 04:23 — Zach Saucier, Apr 05 '16 at 04:23

Chris Spittles · Accepted Answer · 2016-04-05T08:19:07.127

You can use the animation-fill-mode value: forwards to preserve the changes once the animation has finished.

Here is the code with everything working ("desassified" to work as a snippet):

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

More Information

For more information regarding animation-fill-mode see the following page:

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

Need to rotate an element with an animation and hold it in the rotated position

1 Answers1

More Information