Keyframe rotate not progressing - css

Question

I am creating a pretty simple keyframe, but for some reason, the rotate portion of the frame I cannot figure out.
I want the keyframe to make two transitions. Here is in illustration, which explains what I am trying to do better. As you can see in my snippet, the rectangle doesn't continue rotation, but goes back to its original postion. Then if I try to do 180deg it still doesn't work, as it eventually goes back.
I am just wanting the square to turn a total of 180 degrees.
#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);}*/
}
<div id="line"></div>

Answer 1

Here is the animation. I've added animation-fill-mode: forwards;, and a 100% state. I've also made the top line wider so we can see the animation:
#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);}
}
<div id="line"></div>