Question

我在w3schools上看到了这个CSS动画：

http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

代码是：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

很明显，CSS中指定了红色，黄色，蓝色和绿色。但是什么使它逐渐改变颜色？从红色到黄色等等？

提前感谢。

Answer 1

@keyframes导致它改变颜色这里在动画的每个百分比中指定一个颜色，因此它在移动时会发生变化

@-webkit-keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

Answer 2

关键帧“功能”：https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Answer 3

显然，你可以看到百分比：

@keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

和动画指定的持续时间：

animation: myfirst 5s;
/*-----------------^ animation duration*/

这意味着，动画将从（0%）red背景开始，它将逐渐移向25%定义的下一帧（黄色）一旦动画达到指定持续时间的25%，它将变为yellow，一旦持续时间达到50%，它将变为blue，依此类推。

More about keyframes @MDN

Answer 4

这是名为animations的CSS3的一项功能。支持CSS3 animations的{{3}}知道如何根据关键帧中定义的规则创建转场。

Answer 5

您已为所有div代码定义了CSS规则。它的初始background为red，并且有一个名为myFirst的动画，其中5s被指定为持续时间。所以你的动画会持续五秒钟。这些规则指定了您的实际动画行为：

@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

0％表示我们处于第一秒。 25％意味着我们处于第二秒。 50％意味着我们处于第三秒。 75％表示我们处于第四秒。 100％意味着我们处于动画的最后，也就是说，我们处于第五秒。因此，每隔一秒，您的background就会获得一个新的divs。

是什么让这个CSS动画逐渐变色？

5 个答案: