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>
