CSSトランジションで背景色を変更します

Question

マイページには、divの表示内容（実際には単なる単語）によって3つの背景色が変わります。

色は今変更されていますが、予想どおりに滑らかではありません。色はちょうど過渡的に変化することなく残酷に変化します。ここで

は私のCSSです：色の変化は徐々にスムーズに動作させ

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

あなたが何か提案はありますか？

Answer 1

残念ながら、現在CSSグラディエントを移行することはできません。しかし、これを回避して同様の効果を得ることができます。

以下のCSSは、勾配を::before疑似クラスに移動します。これらのグラデーションは透明からセカンダリカラーに変わるため、クラス自体の単色背景のトランジションがバックグラウンドで表示されます。ここ

.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