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

概述我已经开始学习 CSS3中的关键帧动画了.有人认为我注意到的是,无论我如何通过关键帧动画“定时”事物,过渡总是平滑的. 例如;背景颜色从50％变为100％,是动画从50％到100％播放的平滑过渡. 我想要实现的是一种通过“即时”类型的值更改来制作动画的方法. 再一次,一个例子是： 如果BG的50％值为红色且BG的100％值为蓝色;动画应保持红色直至达到100％,并在100％完成时立即变为蓝色. 我 我已经开始学习 CSS3中的关键帧动画了.有人认为我注意到的是,无论我如何通过关键帧动画“定时”事物,过渡总是平滑的.

例如;背景颜色从50％变为100％,是动画从50％到100％播放的平滑过渡.

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

再一次,一个例子是：
如果BG的50％值为红色且BG的100％值为蓝色;动画应保持红色直至达到100％,并在100％完成时立即变为蓝色.

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

解决方法 您可以使用 steps作为计时功能暂停动画直到下一个关键帧

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/

总结

以上是内存溢出为你收集整理的html – 关键帧动画 – 即时更改全部内容，希望文章能够帮你解决html – 关键帧动画 – 即时更改所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。