是否可以在没有Javascript的情况下使用纯CSS3制作此动画？_Javascript_Css

是否可以在没有Javascript的情况下使用纯CSS3制作此动画？

javascript css

是否可以在没有Javascript的情况下使用纯CSS3制作此动画？,javascript,css,Javascript,Css,这是一个非常简单的背景颜色变化动画。使用纯CSS3可以做到这一点吗 var square=document.querySelector（'.square'）； var percentYellow=0；函数changeBackground（）{ 黄色百分比=黄色百分比+10； square.style.background='线性梯度（90度，黄色'+percentYellow+'%，蓝色0'）；如果（黄色百分比尝试这样的方法。包含{ 宽度：400px；高度：400px；边框：实心1

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

var square=document.querySelector（'.square'）；
var percentYellow=0；
函数changeBackground（）{
黄色百分比=黄色百分比+10；
square.style.background='线性梯度（90度，黄色'+percentYellow+'%，蓝色0'）；
如果（黄色百分比尝试这样的方法

。包含{
宽度：400px；
高度：400px；
边框：实心1px黑色；
背景颜色：蓝色；
位置：相对位置；
}
.过度控制{
宽度：100%；
身高：100%；
背景颜色：黄色；
动画：动画2线性；
位置：绝对位置；
}
@动画关键帧{
0%{宽度：0%；}
100%{宽度：100%；}
}
您可以设置背景位置的动画：

.square{
宽度：300px；
高度：300px；
背景：线性梯度（90度，黄色50%，蓝色0）；
背景大小：200%100%；
背景位置：100%0；
边框：1px实心；
动画：slideBG 2s线性向前；
}
@关键帧滑块{
0% {
背景位置：100%0；
}
100% {
背景位置：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); }
}

是的，这是可能的。您可以将.square
元素设置为蓝色，将:after
伪元素设置为黄色，然后设置:after
的宽度动画：

@关键帧动画{
从{
宽度：0；
}
到{
宽度：300px；
}
}
.广场{
宽度：300px；
高度：300px；
背景颜色：蓝色；
边框：1px实心；
}
.square：：之后{
内容：“；
显示：块；
宽度：300px；
高度：300px；
背景颜色：黄色；
动画：动画1s；
}
您可以而且需要设置动画填充模式：forwards；
以保留最终动画样式，否则将回滚到初始样式
动画填充模式：向前-目标将保留由执行期间遇到的最后一个关键帧设置的计算值。（取自）

.square{
宽度：300px；
高度：300px；
背景：线性梯度（90度，黄色0%，蓝色0）；
边框：1px实心；
动画：动画2；
动画填充模式：向前；/*保留动画应用的css*/
}
@关键帧动画{
0%{背景：线性渐变（90度，黄色0%，蓝色0）；}
10%{背景：线性梯度（90度，黄色10%，蓝色0）；}
20%{背景：线性梯度（90度，黄色20%，蓝色0）；}
30%{背景：线性梯度（90度，黄色30%，蓝色0）；}
40%{背景：线性梯度（90度，黄色40%，蓝色0）；}
50%{背景：线性梯度（90度，黄色50%，蓝色0）；}
60%{背景：线性梯度（90度，黄色60%，蓝色0）；}
70%{背景：线性梯度（90度，黄色70%，蓝色0）；}
80%{背景：线性梯度（90度，黄色80%，蓝色0）；}
90%{背景：线性梯度（90度，黄色90%，蓝色0）；}
100%{背景：线性梯度（90度，黄色100%，蓝色0）；}
}
编辑：当我键入此内容时，其他人击败了我并回答了我的问题，但由于我包含了一个指向其他人未提及的文档的链接，我还是要发布此内容

您只能使用带有@关键帧
规则和动画-*
属性的CSS3创建动画
请参阅以供参考
下面是一个小片段：
<!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>


.广场{
宽度：100px；
高度：100px；
背景：线性梯度（90度，黄色0%，蓝色0%）；
边框：1px实心；
动画名称：示例；
动画持续时间：4s；
}
@关键帧示例{
0%{背景：线性梯度（90度，黄色0%，蓝色0%）}
25%{背景：线性梯度（90度，黄色25%，蓝色0%）}
50%{背景：线性梯度（90度，黄色50%，蓝色0%）}
75%{背景：线性梯度（90度，黄色75%，蓝色0%）}
100%{背景：线性梯度（90度，黄色100%，蓝色0%）}
}

注意：对于具有这些属性/规则的供应商来说，存在一个混乱，并且由于我无法让它工作（在Firefox 44上尝试过）。为了保持简单，我只使用了默认的sintax。我希望它至少能对此有所启发
编辑：可能是由于评论中提到的事实，我无法让它工作。
您可以设置要实现的步骤

.square{
宽度：300px；
高度：300px；
背景：蓝色；
边框：1px实心；
位置：相对位置；
}
.方：以前{
内容：''；
显示：块；
位置：绝对位置；
背景：黄色；
显示：块；
左：0；
排名：0；
底部：0；
右：100%；
-webkit动画：播放2个步骤（10）；
-moz动画：播放2个步骤（10）；
-ms动画：播放2个步骤（10）；
-o-动画：播放2个步骤（10）；
动画：播放2个步骤（10）；
}
@-webkit关键帧播放{
从{右：100%；}
到{右：0px；}
}
@-moz关键帧播放{
从{右：100%；}
到{右：0px；}
}
@-ms关键帧播放{
从{右：100%；}
到{右：0px；}
}
@-o关键帧播放{
从{右：100%；}
到{右：0px；}
}
你想让它像示例一样循序渐进还是流畅？@randy fluid可能更好。有人能解释一下为什么这被否决吗？有没有办法让我看看这是否是出于某种原因而被标记的？在没有必要的时候不要创建其他空元素。在我看来，这是最好的选择。使用steps（）
函数（steps（10，结束）