通過@keyframe實現轉換

Question

我試圖用@keyframe動畫實現一個轉換背景漸變的轉換，但似乎無法將我的手指放在我要出錯的位置。

現在背景只是從漸變跳到沒有過渡的漸變。

鏈接jsfiddle

CSS：

.box { 
    position:fixed; 
    width:100%; 
    height:800px; 
    background: #071435; 
    background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    opacity:1; 
} 

.box:hover { 
    -webkit-animation: playbg 3s infinite; 
    -webkit-transition: all 3s linear; 
} 

@-webkit-keyframes playbg { 
    0% { 
    background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%); 
    background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%); 
    opacity:1; 
    } 
    20% { 
    background-image: -o-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%); 
    background-image: -moz-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%); 
    background-image: -ms-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%); 
    background-image: linear-gradient(-180deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%); 
    background-image: -o-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%); 
    background-image: -moz-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%); 
    background-image: -ms-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%); 
    background-image: linear-gradient(-204deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%); 
    background-image: -o-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%); 
    background-image: -moz-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%); 
    background-image: -ms-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%); 
    background-image: linear-gradient(-161deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%); 
    opacity:1; 
    } 
    50% { 
    background-image: -o-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%); 
    background-image: -moz-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%); 
    background-image: -ms-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%); 
    background-image: linear-gradient(-206deg, #F40FD1 0%, #5AD74C 95%); 
    background-image: -o-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%); 
    background-image: -moz-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%); 
    background-image: -ms-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%); 
    background-image: radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%); 
    background-image: -o-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%); 
    background-image: -moz-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%); 
    background-image: -ms-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%); 
    background-image: linear-gradient(-224deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%); 
    background-image: -o-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%); 
    background-image: -moz-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%); 
    background-image: -ms-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%); 
    background-image: linear-gradient(-152deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%); 
    opacity:1; 
    } 
    100% { 
    background-image: -o-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%); 
    background-image: -moz-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%); 
    background-image: -ms-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%); 
    background-image: linear-gradient(-206deg, #1078FF 0%, #4CCCD7 95%); 
    background-image: -o-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%); 
    background-image: -moz-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%); 
    background-image: -ms-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%); 
    background-image: linear-gradient(-134deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%); 
    background-image: -o-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%); 
    background-image: -moz-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%); 
    background-image: -ms-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%); 
    background-image: linear-gradient(-224deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%); 
    background-image: -o-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%); 
    background-image: -moz-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%); 
    background-image: -ms-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%); 
    background-image: linear-gradient(-152deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%); 
    opacity:1; 
    } 
} 

Answer 1

background-image不是動畫或可轉換性質，因此你不能看到它得到轉變，它只是從一種狀態跳到另一個。

MDN Reference | CSS Transitions Spec - Animatable CSS Properties

注意，一些瀏覽器都支持background-image屬性的動畫/轉換，但它不是標準的，因此不建議使用。 [Source]

---

可以實現通過轉換的background-position屬性類似的效果。我的理解是，這是因爲background-position是一個數值/百分比值，因此可以轉換瀏覽器可以確定中間狀態不像background-image。檢查這個fiddle的樣本。

.box { 
 
    /* Do not forget to add browser prefixes for gradients and transitions */ 
 
    position: relative; 
 
    height: 100px; 
 
    background: -webkit-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%); 
 
    background: -moz-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%); 
 
    background: -o-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%); 
 
    background: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%); 
 
    background-size: 200% 100%; 
 
    background-position: 0% bottom; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 
.box:hover { 
 
    background-position: 100% bottom; 
 
}

<div class="box"></div>

另外還有一點要注意的是，transition必須在基類中指定，而不僅僅是:hover。如果您在hover上指定，它將在移動鼠標的同時轉換，但在移出時它將跳轉。這fiddle說明它與前一個比較。