CSS3過濾器模糊關鍵幀動畫

Question

我想要完成的是圖像懸停上的短高斯模糊動畫。有點喜歡把焦點放在相機上。 （聚焦模糊-聚焦）。

這是我走到這一步：

@-webkit-keyframes image_blur { 
    0% { -webkit-filter: blur(0px);} 
    50%; { -webkit-filter: blur(5px);} 
    100% { -webkit-filter: blur(0px);} 
} 

#image { 
    width : 290px; 
    height : 160px; 
    background: url(images/test1.jpg); 
} 

#image:hover { 
    -webkit-animation: image_blur 2s; 
} 

至極似乎並不奏效。任何建議？
在此先感謝。

Answer 1

刪除「;」在你的@-webkit-keyframes「50％」之後。
它會工作。

0% { -webkit-filter: blur(0px);} 
50%; { -webkit-filter: blur(5px);} 
100% { -webkit-filter: blur(0px);} 

使用這個代替

0% { -webkit-filter: blur(0px);} 
50% { -webkit-filter: blur(5px);} 
100% { -webkit-filter: blur(0px);}