Web制作

cssのみで画像をキラーンと光らすアニメーションをご紹介

今回は画像をキラーンと光ったように見せるアニメーションをご紹介します。

コンテンツなどを光らせたりするのに色々な方法があります。もちろんcssだけで記述を済ませるものからjQueryを使うものまでたくさんありますが、今回は私もたまに使うアニメーションをご紹介します。

画像をキラーンと光らす記述方法

まずはhtmlの記述方法がこちらです。

<div class="kiran-img">
<img src="/images/sample.png" alt="キラーン">
<div class="kiran"></div>
</div>

1行目にキラーンと光らせる範囲のクラス名を記述します。次にそのクラス名内に3行目を必ず記述してください。

これによりキラーンと光らせることができます。

次にcssの記述がこちらです。

.kiran-img {
position :relative;
overflow :hidden;
}
.kiran {
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
30% { transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}

長々と記述していますが、ほとんどは対応できないブラウザに対しての記述なのでコピペで使用することができます。

光らせ方は大きさなどは6行目以降をカスタマイズすればお好みのキラーンができます。