css -webkit-linear-gradient animation

Question

I have stumbled upon a problem where linear-gradient keyframes animation does not want to work for chrome and Mozilla but works for IE. What happens is: at the beginning of the animation, gradient is shown at the from{position and then jumps right to to{position without smooth move like it does on IE. I think it ignores the animation, because the jump from{ to to{ happens within 1.0sec regardless on how many seconds I place in animation duration option, IE recognizes these changes. Tried using percentages, tried placing all under one keyframe, nothing worked. Other animations like scale and opacity work on all browsers.

Please advise!

#topBody{
    position: relative;
    z-index: 2;
    margin-top: 10px;
    width: 100%;
    height: 120px;
    background: -ms-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -webkit-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -moz-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -o-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    border: none;
    box-shadow: 0px 5px 10px #696969, 0px -3px 10px #696969;
    animation: anim1 3s ease-out;
    -webkit-animation: anim1 3s ease-out;
    -moz-animation: anim1 3s ease-out;
}

@keyframes anim1{
    from{
        background: -ms-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -ms-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}

@-webkit-keyframes anim1{
    from{
        background: -webkit-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -webkit-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}

@-moz-keyframes anim1{
    from{
        background: -moz-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -moz-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}