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

讓最終結果就顯示到綠色實心圓

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---默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處、

• forwards---表示動畫在結束后繼續(xù)應用最后的關鍵幀的位置

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

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

對比了下時間，我覺得是animation總的5s是從紅方框到綠圓再回到紅方框的時間，你說的瞬間變回紅色是沒搞明白，可能是因為keyframes設置的是關鍵幀而不是動畫的結果，所以動畫完成后，會迅速恢復。加上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設置動畫后結果，避免恢復到紅方框?*/
??background:green;
??border-radius:100%;
}