メインビジュアルや画像をCSSでアニメーションを付ける8パターン

メインビジュアルや、記事のメイン画像、タイトルに使えそうな動き・アニメーションを、CSSでいくつか作成してみました。 シュワッ、シュッ。みたいな。 基本的な形は、アニメーション変化前のデザインに、クラスを付与しアニメーションをしながら変化後の表示にする流れです。 2023/4/5 パターンを追加しました。 2024/10/31 表示修正しました。(jetpack更新による影響ですみません。) 基本のhtml、CSS 基本の構成は下記です。 テキストをposition: absolute; で画像の上に配置し固定している形ですので、お好みでtopやleftを調整して下さい。 またclassのpattern1もデザインに合わせて、数字を変更してください。 html <div class="anime_wrap pattern1"> <img src="image1.jpg" alt=""> <