html - 如何创建平滑渐变背景动画？

Question

我创建了一个div有渐变背景的，我想改变这个渐变。我应用了一个关键帧动画，它立即改变了背景颜色。我怎样才能使这种变化顺利进行？

div {
    width: 100px;
    height: 100px;
    background:linear-gradient(red, yellow);
    animation-name: colorchange;
    animation-duration: 5s;
    -webkit-animation-name: colorchange;
   animation-iteration-count: 5;
    -webkit-animation-duration: 5s;
    text-align: center;
}
@keyframes colorchange {
    0% {background:linear-gradient(red, yellow) }
    35% {background:linear-gradient(yellow, green) }
    70% {background:linear-gradient(green, red) }
    100%{background:linear-gradient(red, yellow)}
}

<div>
Gradient Background
</div>

标签： htmlcssanimation

Answer 1

尝试这个

    div {
        text-align: center;
        width: 100px;
    	height: 90px;
    	color: #fff;
    	background: linear-gradient(0deg, red, yellow, green);
    	background-size: 400% 400%;
    	-webkit-animation: Gradient 15s ease infinite;
    	-moz-animation: Gradient 15s ease infinite;
    	animation: Gradient 15s ease infinite;

        }
       @-webkit-keyframes Gradient {
    	0% {
    		background-position: 50% 0%
    	}
    	50% {
    		background-position: 50% 100%
    	}
    	100% {
    		background-position: 50% 0%
    	}
    }

    @-moz-keyframes Gradient {
    	0% {
    		background-position: 50% 0%
    	}
    	50% {
    		background-position: 50% 100%
    	}
    	100% {
    		background-position: 50% 0%
    	}
    }

    @keyframes Gradient {
    	0% {
    		background-position: 50% 0%
    	}
    	50% {
    		background-position: 50% 100%
    	}
    	100% {
    		background-position: 50% 0%
    	}
    }

<div> Text </div>