タイトル画像にアニメーション付きのエフェクトを適用する方法

MacBook Air Software Reinstall USB Drive
CSS3で box-shadowhoveranimationを使って、鼓動する枠を表現してみたいと思います。

photo credit: codepo8 via photopin cc


マウスを画像に乗せると、枠が色付きで鼓動します。画像に影をつけるには、画像の上に来る要素を用意します。


[実際は、ここまでカクカクな動きではありません]


<div class='image-box'>
<a href='URL'><img class='shadow1' src='画像URL'/></a>
</div>



.image-box {
position: relative;
z-index: 1;
}

.shadow1:hover {
transition: all 0.6s; /* エフェクトのスピード */
-webkit-animation: Rotate 1.2s ease-out;  /* スピードなど */
-webkit-animation-iteration-count: infinite; /* 繰り返す回数 */
}

@-webkit-keyframes Rotate {
100% {
opacity: 1; /* 不透明 */
/* ボックスに影をつける */
box-shadow: inset 0px 0px 0px #66CCFF;
-moz-box-shadow: inset 0px 0px 0px #66CCFF;
-webkit-box-shadow: inset 0px 0px 0px #66CCFF;
}

30% {
opacity: 1;
box-shadow: inset 0px 0px 9px #66CCFF;
-moz-box-shadow: inset 0px 0px 9px #66CCFF;
-webkit-box-shadow: inset 0px 0px 9px #66CCFF;
}

20% {
opacity: 1;
box-shadow: inset 0px 0px 10px #66CCFF;
-moz-box-shadow: inset 0px 0px 10px #66CCFF;
-webkit-box-shadow: inset 0px 0px 10px #66CCFF;
}

10% {
opacity: 1;
box-shadow: inset 0px 0px 11px #66CCFF;
-moz-box-shadow: inset 0px 0px 11px #66CCFF;
-webkit-box-shadow: inset 0px 0px 11px #66CCFF;
}

0% {
opacity: 1;
box-shadow: inset 0px 0px 12px #66CCFF;
-moz-box-shadow: inset 0px 0px 12px #66CCFF;
-webkit-box-shadow: inset 0px 0px 12px #66CCFF;
}
}

.image-box .shadow1 img {
position: relative;
z-index: -1;
}