FIFA Loading Animation
About this project
This project builds a FIFA-style loading animation where a soccer ball bounces across each letter of the word "FIFA" with genuinely physics-driven motion, landing squarely on F, I, F, and A in sequence before looping back to start, and instead of faking a generic up-and-down bob, the ball follows a true gravity arc that accelerates into every landing, compresses flat on impact, stretches as it lifts off, and slows naturally near the peak of its hop, while each letter reacts only at the instant the ball strikes it, squashing under the impact and snapping back like it actually absorbed the weight, and a soft fading shadow beneath the ball sells the height of the bounce so the whole thing reads as one continuous, weighted motion rather than four separate animations running in parallel.
What you will learn
What you'll learn: this project is a deep dive into CSS keyframe choreography and the kind of timing math that separates a animation that loops from one that feels alive, you'll work hands on with cubic-bezier easing curves to mimic acceleration and deceleration, squash and stretch techniques borrowed straight from traditional animation principles, CSS custom properties driven by JavaScript to position elements precisely regardless of font metrics, and a subtle but important lesson in how the transform property behaves when multiple animations try to touch it at once, plus you'll see firsthand why separating concerns like rotation and scale into different elements can save you from animation bugs that are otherwise nearly invisible until you actually inspect the computed styles.
Understand with AI
Get an AI-generated overview or a file-by-file code breakdown. Ask questions about the project below the overview.
This project creates a dynamic "FIFA" loading animation for a web page. It features the word "FIFA" where the letter "I" is replaced by a bouncing and rotating soccer ball emoji. The "I" letter itself also has a subtle squash-and-stretch bounce effect, giving the entire title a lively, animated appearance suitable for a loading screen.
The core structure is an HTML div with the class title containing several span elements. The letters "F" and "FA" are simple spans. The crucial part is the soccer-wrapper span, which acts as a container for both the letter "I" and the soccer emoji. This allows the soccer ball to be absolutely positioned relative to the "I" letter's space.
<div class="title">
<span>F</span>
<span class="soccer-wrapper">
<span class="letter">I</span>
<span class="soccer">⚽</span>
</span>
<span>FA</span>
</div>This HTML snippet shows how the "FIFA" text is structured, with the "I" and soccer ball nested within a wrapper for coordinated animation.
The CSS styles the body with a subtle patterned background and centers the title. The title itself uses flexbox to arrange the letters. The soccer-wrapper is position: relative;, which is key for placing the soccer emoji. The soccer emoji is then position: absolute; and placed bottom: 100%; left: 50%; relative to its wrapper, effectively positioning it above the "I" letter.
.soccer {
position: absolute;
bottom: 100%;
left: 50%;
translate: -50% 0;
/* ... other styles ... */
}This CSS snippet demonstrates how the soccer ball emoji is absolutely positioned above the "I" letter within its wrapper.
The animation is driven entirely by CSS @keyframes. There are three main animations: letter-bounce for the "I" letter, and bounce and rotate for the soccer ball. The letter-bounce animation scales the "I" to create a squash-and-stretch effect. The soccer element combines both rotate (a continuous 360-degree spin) and bounce (vertical translation) animations, creating a realistic soccer ball movement. Both the letter and the ball animations are set to infinite alternate for a continuous loop.
@keyframes bounce {
from { translate: -50% 100%; }
to { translate: -50% 0; }
}
@keyframes rotate {
from { rotate: 0deg; }
to { rotate: 360deg; }
}These keyframes define the vertical bouncing and continuous rotation animations applied to the soccer ball emoji.
.soccer {
/* ... positioning and size ... */
animation: rotate 4s both linear infinite, bounce 0.35s ease-out both infinite alternate;
/* ... other styles ... */
}This snippet shows how multiple animations (rotate and bounce) are simultaneously applied to the soccer ball for a combined effect.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners. Anyone can generate or regenerate; your version is saved in this browser (local storage).
No breakdown yet. Generate one to see a file-by-file explanation. Your version is saved in this browser.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.