我正在尝试实现 css3动画…. 我计划在周期中不断改变我的动画效果 但问题是在一个循环后它停止在红色,它不会进一步改变它的颜色…. 如何继续循环…… http://jsfiddle.net/9CZFS/ 在下面提
我计划在周期中不断改变我的动画效果
但问题是在一个循环后它停止在红色,它不会进一步改变它的颜色….
如何继续循环……
http://jsfiddle.net/9CZFS/
在下面提供我的代码
div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} }见: http://jsfiddle.net/9CZFS/1/
animation:myfirst 5s linear infinite; ----^-----
您需要指定动画将永远循环.
此外,如果您希望动画流畅,则需要以相同的值开头和结尾:
0%,100% {background:red;} 25% {background:yellow;} 50% {background:blue;} 75% {background:green;}