2015-05-20 21 views
5

Tôi đang cố gắng để làm cho hoạt hình nền CSS gradient, tôi là tạo CSS cho gradient trên trang này: http://www.gradient-animator.com/ Đây là css:CSS Gradient hoạt hình không làm việc

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

Nó ra tốt gradient, nhưng nó sẽ không animate nó. Tui bỏ lỡ điều gì vậy? Đây là fiddle: http://jsfiddle.net/9s9g6ktu/

Trả lời

7

Yup .... Bạn phải đóng số body css và có hoạt ảnh khung hình chính theo ý mình. Như thế này http://jsfiddle.net/9s9g6ktu/1/

+0

điều này làm việc công việc tốt. :) – Elle

Các vấn đề liên quan