CSS3滤镜模糊关键帧动画

Posted 2023-03-06

【中文标题】CSS3滤镜模糊关键帧动画

【英文标题】：CSS3 filter blur keyframe animation

【发布时间】：2013-03-02 19:43:13

【问题描述】：

我想要完成的是图像悬停上的简短高斯模糊动画。有点像将焦点放在相机上。 （聚焦-模糊-聚焦）。

这是我目前得到的：

@-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; 

这似乎不起作用。有什么建议吗？

【问题讨论】：

尽可能使用好的IDE，可以解决大部分语法错误。谢谢

【参考方案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);

【讨论】：

我不敢相信我错过了。谢谢，伙计。