Okay, the first James Bond has the lower opacity, blurred. But it doesn’t have a fade out, so the second that comes in makes both show; and they’re both in the same keyframe set.
You have:
Intro wrapper - James Bond
1 H1 - James Bond
1 H1 - James Bond
Why not use 1 James Bond - have it come in from 0 opacity to 100? Why the duplication?
Just FYI, you don’t need to use SVG’s for the div circles, you can have:
- Div Wrapper - Set to Flex
- Add another div, give it 50% radius, and you have a circle