CSS градиентная анимация не работает

Я пытаюсь сделать анимированный фон градиента CSS, я генерирую CSS для градиента на этой странице:http://www.gradient-animator.com/ Вот css:

body {
background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
background-size: 600% 600%;
-webkit-animation: Gradient 60s ease infinite;
-moz-animation: Gradient 60s ease infinite;
animation: Gradient 60s ease infinite;
@-webkit-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

Он выводит градиент отлично, но он не будет анимировать его. Я что-то упускаю? Вот скрипка:http://jsfiddle.net/9s9g6ktu/

6
css css3 gradient html

1 ответов

Юп.... Вы должны закрыть свой body css и ваши анимации ключевых кадров в их собственном согласии. Такой http://jsfiddle.net/9s9g6ktu/1/

8