オブジェクトを基本的な背景色で追加し、遅延を伴う他の色に変更します。

Question

私はulを持っています。 javascriptを使って私はそれにLiを追加します。バックグラウンドカラー＃E4F3D6で追加されたliが必要です。その後10秒後に最終カラーとして#DDDに変更されます。

アニメーションとトランジションディレイでこれが可能であることはわかっていますが、わかりません。

私はこれを書いたが、正常に動作しません。ここで

@-webkit-keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*-webkit-transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 
@-moz-keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*-moz-transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 
@keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 

.test { 
    height: 25px; 
    background-color: #E4F3D6; 
    -webkit-animation: change-color 2s ease; 
    -moz-animation: change-color 2s ease; 
    animation: change-color 2s ease; 
} 

デモ：https://jsfiddle.net/junihh/a657pd6q/4/

誰もが、私を助けてください。要素自体のためのCSSでtransition-delayプロパティを設定

Answer 1

：上記

.test { 
    height: 25px; 
    background-color: #E4F3D6; 
    -webkit-animation: change-color 2s ease 5s forwards; 
    -moz-animation: change-color 2s ease 5s forwards; 
    animation: change-color 2s ease 5s forwards; 
} 

がanimationプロパティの省略表現の代替使用しています：

animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode> 

をanimation-delayプロパティには、その名前が正確に何が指定された値（ここでは5s、5秒）でアニメーションの開始を遅らせます。

document.getElementById('add').addEventListener('click', function() { 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = '<div class="test"></div>'; 
 
    document.getElementById('container').appendChild(li); 
 
}, false);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
} 
 
#container { 
 
    width: 200px; 
 
    margin: 20px auto 0; 
 
    padding: 15px; 
 
    background-color: #FFF; 
 
    border: solid 1px #DDD; 
 
} 
 
#container li { 
 
    background-color: #DDD; 
 
    margin-bottom: 4px; 
 
} 
 
#container li:last-child { 
 
    margin-bottom: 0; 
 
} 
 
.button-box { 
 
    margin: 20px auto 0; 
 
    width: 100px; 
 
} 
 
#add { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    background-color: #666; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    color: #FFF; 
 
} 
 
#add:active { 
 
    background-color: #333; 
 
} 
 
@-webkit-keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
@-moz-keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
@keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
.test { 
 
    height: 25px; 
 
    background-color: #E4F3D6; 
 
    -webkit-animation: change-color 2s ease 5s forwards; 
 
    -moz-animation: change-color 2s ease 5s forwards; 
 
    animation: change-color 2s ease 5s forwards; 
 
}

<ul id="container"> 
 
    <!-- li's --> 
 
</ul> 
 

 
<div class="button-box"> 
 
    <button type="button" id="add">Add row</button> 
 
</div>

JS Fiddle demoを：animation-fill-modeプロパティはアニメーションが完了した後、アニメーションの最終値が持続させます。

デモでは、の代わりに#f90の最終的な色を使用しました。アニメーションをより明瞭にするために使用しています（開始色と終了色の違い、それ以外は見逃しやすい）。