html - 关键帧动画 - 即时更改

Question

我已经开始学习 CSS3 中的关键帧动画。我认为我注意到的是，无论我如何使用关键帧动画“计时”事物，过渡总是平滑的。

例如; 背景颜色从 50% 变为 100%，是动画从 50% 播放到 100% 时的平滑过渡。

我想要实现的是一种通过“即时”类型的值更改来制作动画的方法。

再举一个例子：如果 BG 的 50% 值为红色，BG 的 100% 值为蓝色；动画应保持红色直到达到 100%，并在 100% 完成后立即变为蓝色。

我不确定我的术语是对还是错，但无论如何，某些方向是完美的。

Answer 1

您可以使用步骤作为计时功能来暂停动画，直到下一个关键帧

CSS：

    -webkit-animation-timing-function: steps(1, end);
    -moz-animation-timing-function: steps(1, end);
    -ms-animation-timing-function: steps(1, end);
    -o-animation-timing-function: steps(1, end);
    animation-timing-function: steps(1, end);

示例代码：

@keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        -moz-animation-timing-function: steps(1, end);
        -ms-animation-timing-function: steps(1, end);
        -o-animation-timing-function: steps(1, end);
        animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-o-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -o-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-moz-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -moz-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-webkit-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        background-color:red;
    }
    100% {
        background-color:blue;
    }
}
body {
    height:100%;
    width:100%;
    animation:quick 3s;
    -moz-animation:quick 3s;
    -webkit-animation:quick 3s;
    -o-animation:quick 3s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

http://jsfiddle.net/sC5fy/1/

Answer 2

我刚刚遇到了这个问题，并通过在开始时标记初始值然后在我希望立即发生更改之前再次标记来解决它 - 见下文

@-webkit-keyframes image2 {
  0%   {opacity: 1;}
  24.99%   {opacity: 1;}
  25%  {opacity: 0;}
  100% {opacity: 0;}
}

Answer 3

一个非常简单的解决方案可能是添加background-color: red到您的元素中，然后在该@keyframes部分中：

%0 {
  background-color: blue;
}

试试看：jsFiddle