CSSで実現するフラッシュ（点滅）アニメーション効果の作り方
要素が突然、短い時間だけ明るく発光するように見える演出が「フラッシュ（Flash）」効果です。CSSのアニメーション機能を使えば、外部ライブラリや複雑なJavaScriptに頼ることなく、この点滅のような視覚効果を手軽に実装できます。
フラッシュ効果の仕組み
フラッシュ効果は、@keyframesルールで要素のopacity（不透明度）を一定のタイミングで切り替えることで実現します。以下の例では、0%・50%・100%の時点で不透明度を「1」（完全に表示）に、25%と75%の時点で「0」（完全に非表示）に設定しています。これにより、要素が素早く点滅し、フラッシュのような印象を与えます。
コード例
<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated flash"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
ポイント解説
- animation-duration: 1s; … アニメーション全体の長さを1秒に設定します。値を小さくすると点滅が速くなります。
- animation-fill-mode: both; … アニメーションの開始前・終了後もキーフレームのスタイルが適用されたままになります。
- -webkit-プレフィックス … 古いSafariなどWebKit系ブラウザ向けの互換性を確保するための記述です。
- Reloadボタン … ページを再読み込みしてアニメーションを最初から再生し直すためのボタンです。
このテクニックは、注意を引きたいバナーや通知アイコン、ロゴの演出などに応用できます。opacity以外にもfilter: brightness()などを組み合わせれば、より華やかな発光表現を作ることも可能です。
-
CSSで実現するTada（タダ）アニメーション効果の作り方
CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html> <head> <style> .animated {
-
CSSで作るスイングアニメーション効果の実装方法
スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化