ボタンを押すと各オプションの挙動を比較できます（delay 1秒→右へアニメ2秒→終了後の違いに注目）
none
開始前(delay中)・終了後ともに
元のスタイルの状態（左・緑色）になる。
forwards
開始前は元のスタイルで、終了後は
最後の状態（右・ピンク）のまま
backwards
開始前は（delay中）は最初のアニメの状態（左・水色）で、
終了後は元（左・緑）に戻る
both
開始前は（delay中）は最初のアニメの状態（左・水色）で
終了後は最後の状態（右・ピンク）
解説：
このDEMOの◯（丸）の要素には、background: #66bb6a;（緑色）が設定されています。 
.bar {
    background: #66bb6a;  /* スタイル（緑色） */
    animation: sample-fill 2s 1s 1 normal;

    /* 以下は左から none, forwards, backwards, both が入っています */
    animation-fill-mode: none/forwards/backwards/both;
}

アニメーション開始時（from）は「左・水色」から、終了時（to）は「右・ピンク」に変化します。 
@keyframes sample-fill { 
    from { left: 0; background: #90caf9; }  /* 開始時（左・水色） */
    to   { left: 110px; background: #ec407a; }  /* 終了時（右・ピンク） */
}