线性渐变动画不适用于任何浏览器

Question

我的情况无法解决线性梯度动画问题，我已经在所有浏览器中尝试过了，但是没有任何效果。

  

CSS

body {
    overflow: hidden;
}

.gradient {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, red, blue);
    -webkit-animation: animate 10s ease infinite ;
    animation: animate 10s ease infinite ;

}

@keyframes :animate{
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@-webkit-keyframes :animate{
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}