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