更多信息

Question

我正在试图弄清楚如何将元素设置为某种程度的动画，然后保持该位置。到目前为止，当我为要旋转的元素设置动画时，它不会保持旋转的位置，而是在最后重置回原始位置。

这是一个小提琴，简而言之，我希望上半圆旋转315度并保持该位置，而不是像它那样重置到它的原始位置。

.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保留更改。

以下是包含所有内容的代码（＆＃34; desassified＆＃34;作为代码段）：

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

需要使用动画旋转元素并将其保持在旋转位置

1 个答案:

更多信息