Result
特に凝ったものではなく、keyframesで連続表示しています。
アニメーションをCSS関数で管理しているので割とすっきりしたコードになっています
css
.emoji { font-size: 50px; min-width: 1.4em; margin: 0.3em 0.4em; text-align: center; } .emoji::after { animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes twoFrames {/*2フレームのアニメーション*/ 50% { content: var(--emoji); } } @keyframes threeFrames {/*3フレーム*/ 33.333% { content: var(--emoji-1); } 66.666% { content: var(--emoji-2); } } .hourglass::after {/*2フレームアニメーション例*/ content: 'huge';/*1つ目の絵文字*/ --emoji: 'huga';/*2つ目の絵文字*/ animation-name: twoFrames; animation-duration: 1.2s; }
html
<div class="emoji hourglass"></div>