どうも！LSSです！！
CSSには、様々な「フィルター」が用意されています。
以前にも、
で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。
今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^
白トビ→通常の写真に変化
最初に、とんでもなく白トビした状態で表示しますが、マウスカーソルを乗せる（スマホの場合一度タップする）と、通常の写真に変化します。
コード
<style>
.anmfb1{transition:1s;filter:brightness(1000%);}
.anmfb1:hover{filter:brightness(100%);}
</style>
<p><img src="画像ファイルのURL" alt="中略" width="中略" height="中略" loading="lazy" title="" class="anmfb1" itemprop="image" /></p>
写真は、普通に表示する通常の写真をアップロードします。
で、はてなブログの機能でアップロードして記事に挿入すると、
<img src="画像ファイルのURL" alt="中略" width="中略" height="中略" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
という感じのコードが生成されますが、この
class="hatena-fotolife"
に別のクラス名を半角スペースをあけて付け足し、
class="hatena-fotolife anmfb1"
のようにする、もしくは
class="anmfb1"
のように置き換えてしまい、別途CSS指定部分である、
<style>
.anmfb1{transition:1s;filter:brightness(1000%);}
.anmfb1:hover{filter:brightness(100%);}
</style>
を前に入れてコードを完成させる事で、「マウスカーソルを乗せると白トビ→通常の写真に変化」する画像となります。
※この<style>～</style>を置いた同一ページ上でなら、いくつでも「class="anmfb1"」を指定した画像を配置でき、同様の挙動となります。
※スマホの場合、タップする事で変化しますが、hatena-fotolifeを残しているとタップ時に はてなの機能のほうが実行されてしまうので、今回のサンプルでは「置き換える」方にしています。
セピア色の思い出がよみがえる
色褪せたセピア色の思い出…と見せかけて、マウスカーソルを乗せると普通の写真に戻りますｗ
コード
<style>
.anmfs1{transition:5s;filter:sepia(100%);}
.anmfs1:hover{filter:sepia(0%);}
</style>
<p><img src="画像ファイルのURL" alt="中略" width="中略" height="中略" loading="lazy" title="" class="anmfs1" itemprop="image" /></p>
こちらも同じ要領で、画像挿入した後で、そのimgタグ内のclassにanmfs1を書き足す、もしくは置き換える。
そして<style>～</style>をコピペします。
…思い出もなにも、今日撮ってきたばかりの写真なんですけどねｗｗｗ
transitionについて
上記２種のコードは、どちらも「filter」と「transition」を組み合わせて使用しています。
transition:5s;
とすると、「５秒かけて徐々に変化する」事になります。
このtransitionにも実は、
で使った「steps」による「段階的な変化」を用いる事ができます。
にじんだ景色も目を凝らすと…
stepsを使って「2秒かけて4段階の変化」にしてみました。
filterは「ぼかし」である「blur」を使い、「最初は20px幅のぼかし、それを0px幅に変化させる」という指定です。
コード
<style>
.anmfc1{transition:2s steps(4,end);filter:blur(20px);}
.anmfc1:hover{filter:blur(0px);}
</style>
<p><img src="画像URL" alt="中略" width="中略" height="中略" loading="lazy" title="" class="anmfc1" itemprop="image" /></p>
コントラストの鼓動
今度はマウスカーソル関係なく、延々と「５秒周期でコントラストが異様に高くなる」のを繰り返すサンプルです。
transitionではなく、@keyframesとanimationを使用しています。
コード
<style>
@keyframes anmfkt1a{
0%,50%,100%{filter:contrast(100%);}
80%{filter:contrast(300%);}
}
.anmfkt1{animation:anmfkt1a 5s linear 0s infinite;}
</style>
<p><img src="画像ファイルのURL" alt="中略" width="中略" height="中略" loading="lazy" title="" class="anmfkt1" itemprop="image" /></p>
あとがき
transitionにしろ、keyframesにしろ、効果を指定するところに
filter:フィルター種類(効果量);
という書式でそれぞれのタイミングでの効果を書く事で、こうしたアニメーションがお手軽に作れます^^
今回書いたコードの内容を入れ替えて、例えば「鼓動」するのがコントラストじゃなくてsepia（セピア調）でもいいし、blur（ぼかし）にしてもいいわけです。
※効果量の単位はフィルターの種類によって決まっています。大抵%ですが、blurはpxで指定したり、hue-rotate（今回扱っていませんが色相）はdegだったりします。
効果量の指定をもっと極端な数値にして派手にしてもいいですし、数値の差をおさえておとなしめの効果にしてもオシャレかもですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
