Как сделать переливающийся градиент на keyframes в CSS3?

Question

Dmitry @koteich

CSS

Как сделать переливающийся градиент на keyframes в CSS3?

Здравствуйте!
Пожалуйста, подскажите... Возможно ли сделать переливающийся градиент на keyframes в CSS3?
Хочу, чтобы цвета плавно перетекали, например, от оранжевого к серому, от серого к зеленому и т.д.
В моем коде, вроде, все верно, но 'background' задается не плавно, а резко, с наступлением нового кадра.

@-webkit-keyframes Gradient {
    
    0% {
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.27) 0%, rgba(255,79,0,0.56) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.27)), color-stop(100%,rgba(255,79,0,0.56))); 
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.27) 0%,rgba(255,79,0,0.56) 100%);
        background: -o-linear-gradient(top,  rgba(0,0,0,0.27) 0%,rgba(255,79,0,0.56) 100%);
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.27) 0%,rgba(255,79,0,0.56) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0.27) 0%,rgba(255,79,0,0.56) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45000000', endColorstr='#8fff4f00',GradientType=0 );
	}	
    
    25% {
		background: -moz-linear-gradient(top,  rgba(255,79,0,0.5) 0%, rgba(166,178,158,0.5) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,79,0,0.5)), color-stop(100%,rgba(166,178,158,0.5)));
        background: -webkit-linear-gradient(top,  rgba(255,79,0,0.5) 0%,rgba(166,178,158,0.5) 100%);
        background: -o-linear-gradient(top,  rgba(255,79,0,0.5) 0%,rgba(166,178,158,0.5) 100%);
        background: -ms-linear-gradient(top,  rgba(255,79,0,0.5) 0%,rgba(166,178,158,0.5) 100%);
        background: linear-gradient(to bottom,  rgba(255,79,0,0.5) 0%,rgba(166,178,158,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ff4f00', endColorstr='#80a6b29e',GradientType=0 );
	}
    
    50% {
        background: -moz-linear-gradient(top,  rgba(166,178,158,0.5) 0%, rgba(68,82,46,0.5) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,178,158,0.5)), color-stop(100%,rgba(68,82,46,0.5)));
        background: -webkit-linear-gradient(top,  rgba(166,178,158,0.5) 0%,rgba(68,82,46,0.5) 100%);
        background: -o-linear-gradient(top,  rgba(166,178,158,0.5) 0%,rgba(68,82,46,0.5) 100%);
        background: -ms-linear-gradient(top,  rgba(166,178,158,0.5) 0%,rgba(68,82,46,0.5) 100%);
        background: linear-gradient(to bottom,  rgba(166,178,158,0.5) 0%,rgba(68,82,46,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a6b29e', endColorstr='#8044522e',GradientType=0 );
    }
    
    75% {
        background: -moz-linear-gradient(top,  rgba(68,82,46,0.5) 0%, rgba(77,193,186,0.5) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,82,46,0.5)), color-stop(100%,rgba(77,193,186,0.5)));
        background: -webkit-linear-gradient(top,  rgba(68,82,46,0.5) 0%,rgba(77,193,186,0.5) 100%);
        background: -o-linear-gradient(top,  rgba(68,82,46,0.5) 0%,rgba(77,193,186,0.5) 100%);
        background: -ms-linear-gradient(top,  rgba(68,82,46,0.5) 0%,rgba(77,193,186,0.5) 100%);
        background: linear-gradient(to bottom,  rgba(68,82,46,0.5) 0%,rgba(77,193,186,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8044522e', endColorstr='#804dc1ba',GradientType=0 );
    }
    
    100% {
        background: -moz-linear-gradient(top,  rgba(77,193,186,0.5) 0%, rgba(255,107,107,0.5) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(77,193,186,0.5)), color-stop(100%,rgba(255,107,107,0.5)));
        background: -webkit-linear-gradient(top,  rgba(77,193,186,0.5) 0%,rgba(255,107,107,0.5) 100%);
        background: -o-linear-gradient(top,  rgba(77,193,186,0.5) 0%,rgba(255,107,107,0.5) 100%);
        background: -ms-linear-gradient(top,  rgba(77,193,186,0.5) 0%,rgba(255,107,107,0.5) 100%);
        background: linear-gradient(to bottom,  rgba(77,193,186,0.5) 0%,rgba(255,107,107,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#804dc1ba', endColorstr='#80ff6b6b',GradientType=0 );
    }
}

.animatedSlow {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.Gradient {
  -webkit-animation-name: Gradient;
  animation-name: Gradient;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}