关键帧旋转不进行

Question

我正在创建一个非常简单的关键帧，但由于某种原因，框架的旋转部分我无法弄清楚。

我希望关键帧能够进行两次转换。这是插图，它解释了我想要做的更好。正如您在我的代码段中看到的那样，矩形不会继续旋转，但会回到原来的位置。然后，如果我尝试180deg它仍然无法工作，因为它最终会回来。

我只是想让这个方块总共旋转180度。

＆＃13;

＆＃13;

#line {
  border: 1px solid #8a32cb;
	height: 300px;
  width: 50%;
	-webkit-transform: rotate(0deg);transform: rotate(0deg);
	transition: 1s;-webkit-transition: 1s;
	/*animation: spin 2s ease-in-out forward;*/
	animation-name: spin;
  animation-duration: 2s;
	animation-delay: .7s;
	animation-direction: forward;
	animation-timing-function: ease-in-out;
}
@keyframes spin {
    25%  {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
    50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
    /*50% {-webkit-transform: rotate(180deg);transform: rotate(180deg);}*/
}

＆＃13;

<div id="line"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是动画。我已添加animation-fill-mode: forwards;和100%州。我也把顶线扩大了，所以我们可以看到动画：

＆＃13;

＆＃13;

#line {
  border: 1px solid #8a32cb;
  border-top-width:5px;
	height: 300px;
  width: 50%;
	-webkit-transform: rotate(0deg);transform: rotate(0deg);
	transition: 1s;-webkit-transition: 1s;
	/*animation: spin 2s ease-in-out forward;*/
	animation-name: spin;
  animation-duration: 2s;
	animation-delay: .7s;
	animation-direction: forward;
	animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes spin {
    25%  {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
    50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
    100% {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
}

＆＃13;

<div id="line"></div>

＆＃13;

＆＃13;

＆＃13;