キーフレームの回転が進行しない

Question

かなり単純なキーフレームを作成していますが、何らかの理由でフレームの回転部分がわかりません。

私は、キーフレームで2つのトランジションを作成します。ここにイラストがあります。これは、私がより良くしようとしていることを説明しています。スニペットでわかるように、長方形は回転を続けるのではなく、元の位置に戻ります。その後、私が180degをやろうとすると、それはやっと動作しません。

私は正方形が合計180度回転したいだけです。ここで

#line { 
 
    border: 1px solid #8a32cb; 
 
\t height: 300px; 
 
    width: 50%; 
 
\t -webkit-transform: rotate(0deg);transform: rotate(0deg); 
 
\t transition: 1s;-webkit-transition: 1s; 
 
\t /*animation: spin 2s ease-in-out forward;*/ 
 
\t animation-name: spin; 
 
    animation-duration: 2s; 
 
\t animation-delay: .7s; 
 
\t animation-direction: forward; 
 
\t 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);}*/ 
 
}

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

Answer 1

アニメーションです。私はanimation-fill-mode: forwards;と100%の状態を追加しました。ありがとう、

#line { 
 
    border: 1px solid #8a32cb; 
 
    border-top-width:5px; 
 
\t height: 300px; 
 
    width: 50%; 
 
\t -webkit-transform: rotate(0deg);transform: rotate(0deg); 
 
\t transition: 1s;-webkit-transition: 1s; 
 
\t /*animation: spin 2s ease-in-out forward;*/ 
 
\t animation-name: spin; 
 
    animation-duration: 2s; 
 
\t animation-delay: .7s; 
 
\t animation-direction: forward; 
 
\t 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);} 
 
}

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