你的問題這樣解決，加上最后一行，

讓最終結(jié)果就顯示到綠色實心圓

div:hover {

? animation-name: changeColor;

? animation-duration: 5s;

? animation-timing-function: ease-out;

? animation-delay: .1s;

? animation-fill-mode:forwards;

}

animation-fill-mode主要具有四個屬性值：none、forwards、backwords和both

• none---默認(rèn)值，表示動畫將按預(yù)期進(jìn)行和結(jié)束，在動畫完成其最后一幀時，動畫會反轉(zhuǎn)到初始幀處、

• forwards---表示動畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置

• backwards---會在向元素應(yīng)用動畫樣式時迅速應(yīng)用動畫的初始幀

• both---元素動畫同時具有forwards和backwards效果

對比了下時間，我覺得是animation總的5s是從紅方框到綠圓再回到紅方框的時間，你說的瞬間變回紅色是沒搞明白，可能是因為keyframes設(shè)置的是關(guān)鍵幀而不是動畫的結(jié)果，所以動畫完成后，會迅速恢復(fù)。加上transition就不會出現(xiàn)了。一下為示例，不知道這樣寫是否符合規(guī)范，嘿嘿

@keyframes?changeColor?{
??from?{
????background:?red;
????border-radius:0;
??}
??to?{
????background:green;
????border-radius:100%;
??}
}
div?{
??width:?200px;
??height:?200px;
??background:?red;
??text-align:center;
??margin:?20px?auto;
??line-height:?200px;
??color:?#fff;
??transition:all?.1s??ease-in?0;
}
div:hover?{
??animation-name:?changeColor;
??animation-duration:?5s;
??animation-timing-function:?linear;
??animation-delay:?.1s;
??/*?transitioin設(shè)置動畫后結(jié)果，避免恢復(fù)到紅方框?*/
??background:green;
??border-radius:100%;
}