css3 애니메이션이 계속 변경됨

Question

나는 CSS3 애니메이션을 구현하려고합니다. ... 내 목표를 주기적으로 변경하려고 계획 중입니다. 하지만 문제는주기가 지나면 빨간색으로 멈춰서 색상이 더 이상 변하지 않습니다. ....주기를 계속하는 방법을 ...

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;} 
} 

Answer 1

아래에 내 코드를 제공 : http://jsfiddle.net/9CZFS/1/를

animation:myfirst 5s linear infinite; 
         ----^----- 

애니메이션이 영원히 반복되도록 지정해야합니다. ,

0%,100% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
75% {background:green;} 

Answer 2

당신은 단지 무한 애니메이션을 재생하기 위해 CSS를 말할 필요가 그것을 : 당신이 애니메이션이 부드럽게하려면

또한, 당신은 시작하고 같은 값으로 끝나는 있어야합니다 기본적으로 한 번만 재생됩니다. 이렇게하려면 animation-iteration-count을 사용하십시오. 그냥 div 스타일 선언에 다음 코드를 추가합니다 : http://jsfiddle.net/9CZFS/3/

문서 animation-iteration-count에 대한 : https://developer.mozilla.org/en-US/docs/CSS/animation-iteration-count

참고 : 여기에

-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 

는 데모입니다 내 데모도 변경 애니메이션을 원활하게 빨간색으로 돌아갑니다 완료되면 :

@keyframes myfirst 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
75% {background:green;} 
100% {background:red;} 
}