動畫回CSS動畫

我寫了下面的CSS動畫：動畫回CSS動畫

@-webkit-keyframes shadow { 
    from { 
     color: rgba(200, 200, 200, 0); 
    } 
    to { 
     color: rgba(200, 200, 200, 1); 
    } 
} 
#social .items div:hover span{ 
    -webkit-animation: shadow 0.4s linear 0.5s 1 alternate; 
    -webkit-animation-fill-mode: forwards; 
}

，你可以在這裏看到的結果：（右3圈）http://mklmb.bplaced.de/page/ 但是，當你徘徊後，離開社會箱領域它，文本顏色只是跳回到透明。我想讓它動畫回來。我該怎麼做？

來源

2014-09-11 T_01

您是否嘗試過使用transition？ http://jsbin.com/waxayu/1/edit

#social .items div span{ 
    color: rgba(200, 200, 200, 0); 
    transition: color 0.4s linear 0s; /* Fade out immediately on mouseleave */ 
} 
#social .items div:hover span{ 
    color: rgba(200, 200, 200, 1); 
    transition: color 0.4s linear 1s; /* On hover wait 1s, than fade in */ 
}

來源

2014-09-11 01:38:17

也許..這是一個好主意^^我不知道一個回合轉換的延遲屬性...謝謝！ – 2014-09-11 14:19:55

「動畫填充模式」 [向前/向後]是你正在尋找

通常它會比原來相同的持續時間，但你可以設置如自定義時間在這個例子中：

-webkit-animation-fill-mode: backwards; 
animation-fill-mode: backwards; 
-webkit-animation-duration: 0s; 
animation-duration: 0s;

看到http://jsfiddle.net/20awhhwy/

來源

2014-09-11 08:53:39 sebilasse

不起作用。它只是跳轉到開始幀。（鉻） – 2014-09-11 14:19:08

動畫回CSS動畫

回答

相關問題