배경색을 다른 색상으로 애니메이트

-1

div의 배경색을 가장 밝은 주황색에서 가장 어두운 붉은 색까지 애니메이션화하고 다시 그릴 효과를 그릴 수 있습니까?배경색을 다른 색상으로 애니메이트

나는 jsFiddle을 만들었지 만 밝은 회색 (정적 집합)에서 빨간색으로 색이 변경됩니다. 이것은 내가 가진 것입니다.

색상을 움직이는 것과 관련하여 몇 가지 질문을했지만 색상은 다양하지 않았습니다.

정말 도움이됩니다.

2014-03-24 Quoter

div에이 CSS를 추가하십시오. http://jsfiddle.net/Nillervision/a4ELz/

.test { 
    overflow: hidden; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 40px; 
    line-height: 3;  
    -webkit-animation: glow linear 1s infinite; 
    animation: glow linear 1s infinite; 
} 
@-webkit-keyframes glow { 
    0% { background-color:red; } 
    50% { background-color:orange; } 
    100% { background-color:red; } 

} 
@keyframes glow { 
    0% { background-color:red; } 
    50% { background-color:orange; } 
    100% { background-color:red; } 
}

당신은 단지 애니메이션이 한 번 pageload에 실행 "무한"값을 제거하십시오. 호버에 효과가 나타나게하려면 CSS 전환을 대신 사용할 수 있습니다.

출처

2014-03-25 00:01:34 Nillervision

안녕하세요, 좋아 보이지만 주황색에서 빨간색으로 바꾸고 싶습니다. 내가이 색들의 순서를 바꿀 수 있을까? 그리고 좀 더 음영을 원한다면'50 % {background-color : orange; }'다른 비율로? – Quoter

두 질문에 모두 동의합니다. 원하는 수만큼 키 프레임을 추가 할 수 있으며 모든 색상 (또는 다른 모든 CSS 속성)을 애니메이션으로 만들 수 있습니다. – Nillervision

배경색을 다른 색상으로 애니메이트

답변

관련 문제