タイトルのエフェクトを他のブラウザに対応させた

mba-hack end...
これも以前から認識していた問題です。

photo-credit: syui

このブログでは、タイトルにカーソルを当てると、一定のエフェクトが生じるようにしてあります。




しかし、他のブラウザに対応させていませんでしたので、対応してみました。


/* box-shadow
http://qiita.com/garaemon/items/15197656e17d6aead387
*/

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

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

@-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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

80% {
opacity: 1;
box-shadow: inset 0px 0px 5px #66CCFF;
-moz-box-shadow: inset 0px 0px 5px #66CCFF;
-webkit-box-shadow: inset 0px 0px 5px #66CCFF;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

60% {
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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

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

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

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

@-moz-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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

80% {
opacity: 1;
box-shadow: inset 0px 0px 5px #66CCFF;
-moz-box-shadow: inset 0px 0px 5px #66CCFF;
-webkit-box-shadow: inset 0px 0px 5px #66CCFF;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

60% {
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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

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

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

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

@-ms-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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

80% {
opacity: 1;
box-shadow: inset 0px 0px 5px #66CCFF;
-moz-box-shadow: inset 0px 0px 5px #66CCFF;
-webkit-box-shadow: inset 0px 0px 5px #66CCFF;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

60% {
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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

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

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

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

@-o-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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

80% {
opacity: 1;
box-shadow: inset 0px 0px 5px #66CCFF;
-moz-box-shadow: inset 0px 0px 5px #66CCFF;
-webkit-box-shadow: inset 0px 0px 5px #66CCFF;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

60% {
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;
-ms-box-shadow: inset 0px 0px 20px #66CCFF;
-o-box-shadow: inset 0px 0px 20px #66CCFF;
}

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

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

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

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



ここで、 -webkit-ChromeSafariです。

-moz-Firefoxです。


-o-Opera-ms-IEでしょうか。多分...。


あと、 animation: Rotate 1.2s ease-outの解説ですが、 自分で決めた名前(Rotate) | スピード(1.2s) | 再生の種類(ease-out)となっています。


そろそろ、このブログもやることがなくなってきたため、役目を果たしたと言っても良さそうです。