div Transparency animation in CSS

div Transparency animation in CSS

having a slight problem here. I have a background image on the page. I
want a div to fade in and 'cover' the image via transparency. It works
fine except at the end. The transparency/opacity value should end at 0.8
but once the 7s of transition are done it 'jumps' to full opacity (doesn't
remain at 0.8). Here is the css code:
@-webkit-keyframes fadein {
from { opacity: 0.5; }
to { opacity: 0.8; }
}
@-moz-keyframes fadein {
from { opacity: 0.5; }
to { opacity: 0.8; }
}
@keyframes fadein {
from { opacity: 0.5;}
to { opacity: 0.8; }
}
#contents {width:900px; height:600px; margin-left:40px; border:groove;
background-color: #003; -webkit-animation: fadein 7s; -moz-animation:
fadein 7s; animation: fadein 7s; }
... I'm obviously missing a hand-brake somewhere .. any ideas? Thanks