如何平滑地動畫漸變背景

-2

我想要達到的效果要比用戶將鼠標懸停在div上時的效果好，它的背景顏色變成了一個漸變，可以使用純粹的CSS反覆地從一個角落切換到另一個角落。如何平滑地動畫漸變背景

我想達到的效果，試圖把它放在文字上，只要光標保持在上方，背景的較暗部分（帶有0.9不透明度的那一部分）就會從一個角落滑到另一個角落元件。

實際發生的事情是背景從一個狀態跳轉到另一個狀態。我哪裏錯了？我怎樣才能讓這成爲一種動畫效果，流暢的效果？

這裏是我的代碼：

#test { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: rgba(215, 54, 92, 0.7); 
 
} 
 
@keyframes test_hover { 
 
    from { 
 
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* Standard syntax (must be last) */ 
 
    } 
 
    to { 
 
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* Standard syntax (must be last) */ 
 
    } 
 
} 
 
#test:hover { 
 
    cursor: pointer; 
 
    animation-name: test_hover; 
 
    animation-duration: 4s; 
 
    animation-delay: 1s; 
 
    animation-iteration-count: infinite; 
 
}

<div id="test"></div>

這裏是JSFiddle

這個問題已經被提及是從here重複，但我認爲事實並非如此。首先，這個問題中沒有代碼，這使得難以理解。另外，在回答這個問題時，他使用了一個過渡，但我不想過渡，因爲它只應用了一次，我希望我的動畫在用戶懸停div時不斷重複。

來源

2015-11-25 pablito.aven

同樣的事情真的，動畫或過渡......這不是可轉換/動畫。你必須以我認爲的bg位置做一些事情。 –

@ pablito.aven他的確幫忙解釋。背景漸變不可轉換。您可以使用圖像並播放背景位置，但這是關於它的。 – CaldwellYSR

你可以用javascript來實現它http://stackoverflow.com/questions/33892656/how-change-css-using-variables-to-make-an-animation –

正如在評論中已經指出的那樣，線性漸變不像顏色（background-color）那樣是可轉換或動畫的，因爲它們被認爲是圖像（background-image）。轉換效應通常由UA計算每個中間階段的值，然後將該值應用於元素來實現。在圖像的情況下，不可能在中間階段計算值，因此它們不能被轉換。

您需要轉換位置（background-position）才能實現該效果。這可以通過使用其背景包含linear-gradient並在hover上動畫其位置的僞元素來完成。漸變應該是雙向的（也就是說，它應該從rgba(215,54,92,0.9)到rgba(215,54,92,0.5)，然後到rgba(215,54,92,0.9)），因爲它需要適應動畫的兩個階段，並且其background-size也需要是雙倍的（即200% 200%）。然後，通過將0% 100%的位置動畫到100% 0%，可以實現所需的效果。

#test { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: rgba(215, 54, 92, 0.7); 
 
    transition: background-color .1s; 
 
} 
 
#test:hover { 
 
    background-color: transparent; 
 
    cursor: pointer; 
 
} 
 
#test:hover:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); 
 
    background-size: 200% 200%; 
 
    background-position: 0% 100%; 
 
    animation-name: test_hover; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    animation-direction: alternate; 
 
} 
 
@keyframes test_hover { 
 
    from { 
 
    background-position: 0% 100%; 
 
    } 
 
    to { 
 
    background-position: 100% 0%; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div id="test"></div>

另一個稍微不同的方法可用於爲增加兩個僞元素與動畫的梯度的每個具有一個階段，然後動畫其opacity使得在任何點時間只有其中一個可見。這也會產生類似的效果。

#test { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: rgba(215, 54, 92, 0.7); 
 
    transition: background-color .1s; 
 
} 
 
#test:before, 
 
#test:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
#test:before { 
 
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); 
 
    opacity: 0; 
 
} 
 
#test:after { 
 
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); 
 
    opacity: 0; 
 
} 
 
@keyframes test_hover { 
 
    0%, 100% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
} 
 
#test:hover:before, 
 
#test:hover:after { 
 
    cursor: pointer; 
 
    animation-name: test_hover; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-fill-mode: backwards; 
 
} 
 
#test:hover:before { 
 
    animation-delay: 1s; 
 
} 
 
#test:hover:after { 
 
    animation-delay: 3s; 
 
} 
 
#test:hover { 
 
    background-color: transparent; 
 
    transition: background-color 2s 1s; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div id="test"></div>

來源

2015-11-26 12:23:08 Harry

要爲背景設置動畫，您需要修改背景位置。

要進行平滑的過渡，需要用不透明玩 - 因爲你不希望所有的元素消失，你需要使用一個僞元素此

#test{ 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    background-color: rgba(215,54,92,0.7); 
 
    transition: background-color 1s; 
 
} 
 
#test:hover{ 
 
    background-color: transparent; 
 
} 
 

 
#test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    z-index: -1; 
 
    background-image: linear-gradient(45deg, 
 
        rgba(215,54,92,0.5), 
 
        rgba(215,54,92,0.9), 
 
        rgba(215,54,92,0.5), 
 
        rgba(215,54,92,0.9), 
 
        rgba(215,54,92,0.5) 
 
        ); 
 
    background-size: 800px 800px; 
 
    background-position: 0px 0px; 
 
    animation: move 2s infinite linear; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
#test:hover:after { 
 
    opacity: 1; 
 
} 
 
@keyframes move { 
 
    from {background-position: 0px 600px;} 
 
    to {background-position: -800px 600px;} 
 
}

<div id="test"></div>

來源

2015-11-26 12:22:19 vals

一個宇宙的巧合....但你的答案總是更完整！ – vals

如何平滑地動畫漸變背景

回答

相關問題