这是一个非常简单的背景颜色变化动画。是否可以使用纯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>
答案 0 :(得分：6)
您可以为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()来维持＆＃34;步进＆＃34;您的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>
答案 1 :(得分：2)
是的，这是可能的。您可以将.square元素设为蓝色，将::after伪元素设为黄色，然后为::after的宽度设置动画：
@keyframes animation {
from {
width: 0;
}
to {
width: 300px;
}
}
.square {
width: 300px;
height: 300px;
background-color: blue;
border: 1px solid;
}
.square::after {
content: "";
display: block;
width: 300px;
height: 300px;
background-color: yellow;
animation: animation 1s;
}<div class="square"></div>
答案 2 :(得分：1)
您可以use css animation并且需要设置animation-fill-mode: forwards;以保留最终动画样式，否则它将回滚到初始样式。
动画填充模式：转发 - 目标将保留执行期间遇到的最后一个关键帧设置的计算值。（取自here）
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 0%, blue 0);
border: 1px solid;
animation: anim 2s;
animation-fill-mode: forwards; /* retain the css applied by animation */
}
@keyframes anim {
0% { background: linear-gradient(90deg, yellow 0%, blue 0); }
10% { background: linear-gradient(90deg, yellow 10%, blue 0); }
20% { background: linear-gradient(90deg, yellow 20%, blue 0); }
30% { background: linear-gradient(90deg, yellow 30%, blue 0); }
40% { background: linear-gradient(90deg, yellow 40%, blue 0); }
50% { background: linear-gradient(90deg, yellow 50%, blue 0); }
60% { background: linear-gradient(90deg, yellow 60%, blue 0); }
70% { background: linear-gradient(90deg, yellow 70%, blue 0); }
80% { background: linear-gradient(90deg, yellow 80%, blue 0); }
90% { background: linear-gradient(90deg, yellow 90%, blue 0); }
100% { background: linear-gradient(90deg, yellow 100%, blue 0); }
}<div class="square"></div>
答案 3 :(得分：0)
尝试这样的事情
.contain{
width:400px;
height:400px;
border:solid 1px black;
background-color:blue;
position:relative;
}
.overcontain{
width:100%;
height:100%;
background-color:yellow;
animation:anime 2s linear;
position:absolute;
}
@keyframes anime{
0%{width:0%;}
100%{width:100%;}
}<div class="contain">
<div class="overcontain"></div>
</div>
答案 4 :(得分：0)
只能用CSS完成
.square{
width:300px;
height:300px;
background:linear-gradient(90deg, yellow 0%, blue 0);
border:1px solid;
animation-name: slide;
animation-duration: 4s;
}
@keyframes slide {
0% { background:linear-gradient(90deg, yellow 0%, blue 0); }
10% { background:linear-gradient(90deg, yellow 10%, blue 0); }
20% { background:linear-gradient(90deg, yellow 20%, blue 0); }
/* and so on ... */
100% { background:linear-gradient(90deg, yellow 100%, blue 0); }
}
答案 5 :(得分：0)
编辑：其他人在我打字时打败了我并回答了问题，但由于我添加了一个文档的链接，没有其他人提及我无论如何都会发布此帖。
您只能使用包含@keyframes规则和animation-*属性的CSS3制作动画。
请参阅http://www.w3schools.com/css/css3_animations.asp以供参考。
这是一个小片段：
<!DOCTYPE html>
<html>
<head>
<style>
.square{
width:100px;
height:100px;
background:linear-gradient(90deg, yellow 0%, blue 0%);
border:1px solid;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background:linear-gradient(90deg, yellow 0%, blue 0%)}
25% {background:linear-gradient(90deg, yellow 25%, blue 0%)}
50% {background:linear-gradient(90deg, yellow 50%, blue 0%)}
75% {background:linear-gradient(90deg, yellow 75%, blue 0%)}
100% {background:linear-gradient(90deg, yellow 100%, blue 0%)}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
注意：有关这些属性/规则的供应商存在混乱，并且由于我无法使其正常工作（在Firefox 44上尝试过）。为了简单起见，我只使用了默认的sintax。我希望至少可以对此有所了解。
编辑：由于此处的评论中提到的事实，我可能无法使其正常运作。
答案 6 :(得分：0)
您可以设置您想要实现的步数。
.square{
width:300px;
height:300px;
background:blue;
border:1px solid;
position: relative;
}
.square:before{
content: '';
display: block;
position: absolute;
background: yellow;
display:block;
left: 0;
top:0;
bottom:0;
right: 100%;
-webkit-animation: play 2s steps(10);
-moz-animation: play 2s steps(10);
-ms-animation: play 2s steps(10);
-o-animation: play 2s steps(10);
animation: play 2s steps(10);
}
@-webkit-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
@-moz-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
@-ms-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
@-o-keyframes play {
from { right: 100%; }
to { right: 0px; }
}<div class="square"></div>