CSS makes the world go round 🌎

You can make the animation sliiiightly smoother, by adding "in between" frames by creating a crossfade layer that displays in bewteen the current frames.

Say, add a ::before pseudo element to .world, layer it directly on top of the ::after, and give it the following keyframes:

@keyframes world-tween{
    16.5% {
        content: '🌍';
        opacity: .5;
    } 
    33% {
        opacity: 0;
    }
    50% {
        content: '🌏';
        opacity: .5;
    }
    66% {
        opacity: 0;
    }
    83% {
        content: '🌎';
        opacity: .5;
    }
}