CSS3动画 - 平滑无限循环 [英] CSS3 animation - smooth infinite cycle

问题描述

我做了一个小的背景动画，其中div随着时间的推移而变化颜色。
它工作顺利，但当它达到100％，它直接跳到0％没有任何转换。
我在google上搜索过，尝试了不同的动画方式，但如果动画，我无法得到一个流畅的重新启动。

我缺少什么？

  -webkit-animation：pulsate 20s infinite; 
 animation：pulsate 20s infinite; 
 -moz-animation：pulsate 20s infinite; 
 
 @ -webkit-keyframes pulsate {
 0％{background：@black} 
 25％{background：@red} 
 50％{background：@blue } 
 75％{background：@orange} 
 100％{background：@green} 
} 
 
 
 @keyframes pulsate {
 0％{background：@black} 
 25％{background：@red} 
 50％{background：@blue} 
 75％{background：@orange} 
 100％ {background：@green} 
} 
 
 @ -moz-keyframes pulsate {
 0％{background：@black} 
 25％{background：@red} 
 50％{background：@blue} 
 75％{background：@orange} 
 100％{background：@green} 
} 
  

解决方案

你只需要以另一种方式修复你的框架：使 （0％）和到（100％）的值相同：

div class =snippetdata-lang =jsdata-hide =false>

  html，body {width：100％;高度：100％; margin：0; padding：0;} body {-webkit-animation：pulsate 20s linear infinite; -moz动画：脉动20s线性无限;动画：pulsate 20s linear infinite;} @  -  webkit-keyframes pulsate {0％{background：black} 20％{background：red} 40％{background：blue} 60％{background：orange} 100％{background：black}} @  -  moz-keyframes pulsate {0％{background：black} 20％{background：red} 40％{background：blue} 60％{background：orange} 100％{background：black}} @ keyframes pulsate {0％{background：black} 20％{background：red} 40％{background：blue} 60％{background：orange} background：black}}  

I've made a small background animation where a div changes color over time. It works smoothly, but when it gets to 100% it jumps straight to 0% without any transition. I've searched on google and tried different ways of doing the animation, but I've been unable to get a fluid "restart" if the animation.

What am I missing?

-webkit-animation: pulsate 20s infinite;
animation: pulsate 20s infinite;
-moz-animation: pulsate 20s infinite;

            @-webkit-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }


            @keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }

            @-moz-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }

解决方案

You just have to fix your frames in another way : make the from (0%) and to (100%) values the same:

html, body {   
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
}
body {
    -webkit-animation: pulsate 20s linear infinite;
    -moz-animation: pulsate 20s linear infinite;
    animation: pulsate 20s linear infinite;
}

@-webkit-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@-moz-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}

这篇关于CSS3动画 - 平滑无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！