パーツ番号 09-01-06 ・ CSSのみ

アニメーションアイコン集

ベル揺れ・ハート鼓動・チェック描画・星の点滅の4種を自作SVGで表現。常時ゆるく動きます。ボタンやリストの視線誘導アクセントに便利です。

autocsssvg

プレビュー

ソースコード

HTML

<div class="d09-01-06-row">
          <span class="d09-01-06-ic d09-01-06-bell"><svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#334155" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></span>
          <span class="d09-01-06-ic d09-01-06-heart"><svg viewBox="0 0 24 24" width="30" height="30" fill="#ef4444" stroke="none"><path d="M12 21s-7.5-4.9-10-9.3C.4 8.6 1.9 5 5.3 5 7.4 5 8.9 6.3 12 9c3.1-2.7 4.6-4 6.7-4 3.4 0 4.9 3.6 3.3 6.7C19.5 16.1 12 21 12 21z"/></svg></span>
          <span class="d09-01-06-ic d09-01-06-check"><svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#16a34a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path class="d09-01-06-cpath" d="M4 12l5 5L20 6"/></svg></span>
          <span class="d09-01-06-ic d09-01-06-star"><svg viewBox="0 0 24 24" width="30" height="30" fill="#f59e0b" stroke="none"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z"/></svg></span>
        </div>

CSS

.d09-01-06-row{display:flex;gap:18px;align-items:center}
        .d09-01-06-ic{display:inline-flex}
        .d09-01-06-bell svg{transform-origin:50% 10%;animation:d09-01-06-swing 2s ease-in-out infinite}
        @keyframes d09-01-06-swing{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(12deg)}80%{transform:rotate(-9deg)}90%{transform:rotate(5deg)}}
        .d09-01-06-heart svg{animation:d09-01-06-beat 1.4s ease-in-out infinite}
        @keyframes d09-01-06-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.25)}40%{transform:scale(1)}}
        .d09-01-06-cpath{stroke-dasharray:32;stroke-dashoffset:32;animation:d09-01-06-draw 2.4s ease-in-out infinite}
        @keyframes d09-01-06-draw{0%{stroke-dashoffset:32}40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
        .d09-01-06-star svg{animation:d09-01-06-twinkle 1.8s ease-in-out infinite}
        @keyframes d09-01-06-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

クラス名 .d09-01-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。