デザイン
2021.08.24
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行目以降をカスタマイズすればお好みのキラーンができます。
cssでキラーンとアニメーションをする際の注意点
まず、htmlに記載する場合は、必ずkiran-imgというクラス名を付けたタグ内に<div class=”kiran”></div>を記述するようにしてください。これがタグ外に記載しているとアニメーションは動きません。
つぎに、いろいろなブラウザでアニメーションが動くようにcssを記述していますが、ブラウザによっては動かなかったり、動作がおかしかったりする場合もあるかもしれません。
ですから、使用する際は必ずブラウザ確認をするようにしてください。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
