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