異なる複数の絵文字を連続表示させる
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 {
50% {
content: var(--emoji);
}
}
@keyframes threeFrames {
33.333% {
content: var(--emoji-1);
}
66.666% {
content: var(--emoji-2);
}
}
.hourglass::after {
content: 'huge';
--emoji: 'huga';
animation-name: twoFrames;
animation-duration: 1.2s;
}
|
html
<div class="emoji hourglass"></div>
|
via
Simple Emoji Animations
