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