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

前端之家收集整理的这篇文章主要介绍了html – 关键帧动画 – 即时更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经开始学习 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/

原文链接:https://www.f2er.com/html/227785.html

猜你在找的HTML相关文章