異なる複数の絵文字を連続表示させる

Ads

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>

via

Simple Emoji Animations