左から・右から・真ん中から画像が際立つ CSS アニメーションの紹介です。アイキャッチ画像や本文中の画像、ランディングページの画像など、いろいろな画像に使えます。 サンプルは、便宜上アニメーションの再生回数を無限にしています(提示している CSS のアニメーション回数は 1 回です)。 共通の HTML 。 <div class="img-wrap"> <img /> </div> 左から徐々に表示するアニメーション。 CSS 。 .img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer
![画像を徐々に表示する CSS アニメーション - FirstLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ba594ea3752173b979f9b4989af2636f861dc8e/height=288;version=1;width=512/https%3A%2F%2Ffirstlayout.net%2F_astro%2Fcss.E95-Ntjg_1xjD4q.png)