web. 동적 이모지 추가

참고 codepen : https://codepen.io/GeorgePark/pen/aazBGj

Simple Emoji Animations

 

.emoji {
    font-size: calc(100px + 4vw);
    min-width: 1.4em;
    margin: 0.3em 0.4em;
    text-align: center;
}

.emoji::after {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.camera::after {
    content: '📷';
    --emoji: '📸';
    animation-name: twoFrames;
    animation-duration: 1.2s;
}


@keyframes twoFrames {
    50% {
        content: var(--emoji);
    }
}

@keyframes threeFrames {
    33.333% {
        content: var(--emoji-1);
    }

    66.666% {
        content: var(--emoji-2);
    }
}

<span class="emoji camera" role="img" aria-label="camera flash"></span>