CSS 전환시 배경색 변경

Question

내 페이지에는 div가 표시하는 내용 (실제로는 단어)에 따라 세 가지 배경색이 있습니다.

색상이 지금 변경되지만 예상대로 부드럽게 전환되지 않습니다. 색깔은 변화없이 작동하면서 잔인하게 변화합니다.

.gradient-low{ 
background: #ddd6f3; 
background: -webkit-linear-gradient(to left, #faaca8 , #ddd6f3); 
background: linear-gradient(to left, #faaca8 , #ddd6f3); 
transition-duration: 0.4s; 
} 

.gradient-moderate{ 
background: #ff6e7f; 
background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff); 
background: linear-gradient(to left, #ff6e7f , #bfe9ff); 
transition-duration: 0.4s; 
} 

.gradient-high{ 

background: #EECDA3; 
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3); 
background: linear-gradient(to left, #EF629F , #EECDA3); 
transition-duration: 0.4s; 
} 

당신은 색상의 변화가 점진적으로 원활하게 운영되도록 제안이 있습니까 : 여기

내 CSS입니까?

Answer 1

불행히도 현재 CSS 그래디언트를 전환 할 수 없습니다. 그러나 비슷한 효과를 내기 위해이 문제를 해결할 수 있습니다.

아래 CSS는 그라데이션을 ::before 가상 클래스로 이동합니다. 이러한 그라디언트는 이제 투명에서 2 차 색상으로 변하기 때문에 클래스 자체의 단색 배경 전환이 백그라운드에서 볼 수 있습니다. 여기

.gradient-low { 
    background: #ddd6f3; 
    transition: background 0.4s; 
} 

.gradient-low::before { 
    height: 100%; 
    width: 100%; 
    content: ''; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background: linear-gradient(to left, #faaca8 , rgba(0,0,0,0)); 
} 

전체 바이올린 : https://jsfiddle.net/mstringfellow/zftzrobv/

Answer 2

이 가능하지 않다 전환을 사용하지만 우리는 CSS 애니메이션 및 키 프레임 애니메이션을 사용할 수 있습니다. 이 시도 :

.gradient-high{ 

background: #EECDA3; 
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3); 
background: linear-gradient(to left, #EF629F , #EECDA3); 
animation-name: drop; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-out; 
    animation-duration: 5s; 
} 

@keyframes drop { 
    0% { 
    transform: translateY(-100%); 
    } 
    100% { 
    transform: translateY(50); 
    } 
} 

완전한 작업, 예를 들어, 너무 FIDDLE