2015-05-20 14 views
5

arbeiten Ich versuche, animierte CSS Gradient Hintergrund zu machen, ich bin auf dieser Seite für Gradienten CSS zu erzeugen: http://www.gradient-animator.com/ Hier ist die CSS:CSS Gradient Animation nicht

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%} 
} 
} 

Es gibt Gradienten in Ordnung, aber Es wird es nicht animieren. Fehle ich etwas? Hier ist die Geige: http://jsfiddle.net/9s9g6ktu/

Antwort

7

Yup .... Sie müssen Ihre body CSS schließen und haben Ihre Keyframe-Animationen in ihrer eigenen Übereinstimmung. So funktioniert http://jsfiddle.net/9s9g6ktu/1/

+0

das funktioniert fein.great job :) – Elle