CSS – 画像と相性が良さそうなアニメーション

環境

HTML
HTML5
CSS
CSS3

実行

マウスが画像にホバーした瞬間に画像が一瞬だけ点滅するようなエフェクトをかけ、それと同時に Blurで画像にぼやかしています。実装にはCSSを下記のように記述します。

html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<img src="m.jpg" class="hover_me" ontouchstart="" >
</body>
</html>

css

index.css

img.hover_me:hover{
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;

-webkit-filter: blur(3px);
filter: blur(3px);
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}