使用CSS動畫線性漸變

我想移動具有多種顏色的漸變，但問題在於動畫不平滑，它只是在每一步都改變它的位置。使用CSS動畫線性漸變

這裏是

<style> 
.animated { 
    width:300px; 
    height:300px; 
    border:1px solid black; 
    animation:gra 5s infinite; 
    animation-direction:reverse; 
    -webkit-animation:gra 5s infinite; 
    -webkit-animation-direction:reverse; 

    animation-timing-function:linear; 
    -webkit-animation-timing-function:linear; 
} 
@keyframes gra { 
    0% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); 
    } 
    50% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); 
    } 
    100% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); 
    } 
} 
</style> 
<div class="animated"> 
    <h1>Hello</h1> 

</div>

是否有可能實現，而無需使用jQuery的。

我的jsfiddle鏈接是http://jsfiddle.net/bAUK6

來源

2014-05-03 tehTerminator

請更新小提琴鏈接 –

好吧剛剛更新的鏈接。 http://jsfiddle.net/bAUK6/1/ – tehTerminator

嗯，我想你可能想試試你的IE 11演示（不確定IE 10），它可以像你期望的那樣工作。所有其他瀏覽器目前不支持背景動畫，您可以嘗試動畫背景位置**，但**當然這不會通過動畫整個背景來實現所有效果。 –

可悲的是，你可以梯度之間像這樣的CSS動畫沒有。

當然有很多解決方法，this one being the most elegant，因爲它只是使用CSS。

來源

2015-04-13 15:37:08

請試試這個代碼：

#gradient 
 
{ 
 
    height:300px; 
 
    width:300px; 
 
    border:1px solid black; 
 
    font-size:30px; 
 
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); 
 
    background-size: 200% 200%; 
 

 
    -webkit-animation: Animation 5s ease infinite; 
 
    -moz-animation: Animation 5s ease infinite; 
 
    animation: Animation 5s ease infinite; 
 
} 
 

 
@-webkit-keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
} 
 
@-moz-keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
} 
 
@keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
}

<html> 
 
<div id="gradient"> 
 
    Hello 
 
</div> 
 
</html>

來源

2016-07-03 18:51:33

使用CSS動畫線性漸變

回答

相關問題