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;
}
}