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

除掉 ";" 在你的"50%"之后@-webkit-keyframes.
它会工作.

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);}