Stop CSS3 opacity animation before 1 - css

Question

I'm trying to animate a certain div opacity from 0 to 0.6, but it seems that at the end of the animation it jumps to 1.
What am I missing?
#test {
width: 200px;
height: 200px;
background-color: #900;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
<div id="test"></div>

Answer 1

You need to specify animation-fill-mode: forwards if you want the element's CSS to remain at the last step of the animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Forwards: The target will retain the computed values set by the last keyframe encountered during execution.
#test {
width: 200px;
height: 200px;
background-color: #900;
animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-webkit-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
<div id="test"></div>

Answer 2

Have you tried setting the opacity on the element you are animating to the final value?
I believe the rules in a CSS animation stop applying when the animation finishes. I would guess it is animating from 0 to 0.5 and then reverting to 1, 1 being the default opacity since you don't have an opacity specified on the element itself.
I hope this helps!