有没有Javascript的纯CSS3可以做这个动画吗？

Question

这是一个非常简单的背景颜色变化动画.是否可以使用纯CSS3来做到这一点？

var square = document.querySelector('.square');
var percentYellow = 0;
function changeBackground(){
	percentYellow = percentYellow + 10;
	square.style.background = 'linear-gradient(90deg, yellow '+percentYellow+'%, blue 0)';
	if(percentYellow<=100){
		setTimeout(changeBackground,200);
	}
}
changeBackground();

	.square{
		width:300px;
		height:300px;
		background:linear-gradient(90deg, yellow 0%, blue 0);
		border:1px solid;
	}

<div class="square"></div>

Answer 1

你可以动画background-position:

.square {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, yellow 50%, blue 0);
  background-size: 200% 100%;
  background-position: 100% 0;
  border: 1px solid;
  animation: slideBG 2s linear forwards;
}
@keyframes slideBG {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

<div class="square"></div>

或者,正如@Harry指出的那样,您可以使用steps()来维护javascript版本产生的"阶梯式"转换:

.square {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, yellow 50%, blue 0);
  background-size: 200% 100%;
  background-position: 100% 0;
  border: 1px solid;
  animation: slideBG 2s steps(10, end) forwards;
}
@keyframes slideBG {
  to {
    background-position: 0 0;
  }
}

<div class="square"></div>