Let’s create a FIFA Loading Animation using HTML and CSS. In this project, we build a fun football-themed loading animation where a rotating ⚽ soccer ball bounces above the letter “I” in the FIFA logo, creating an engaging loading effect.
We’ll use:
HTML to create the FIFA text structure, position the soccer ball, and organize the elements needed for the animation.
CSS to style the text, add a modern background, animate the letter with a bounce effect, make the soccer ball rotate and jump smoothly, and create a clean football-inspired loading screen.
This project is perfect for beginners who want to learn CSS animations, keyframes, transforms, positioning, and creative loading effects using only HTML and CSS. Let’s build an awesome FIFA Loading Animation! ⚽🚀
HTML :
The HTML creates the structure of the page. It displays the word “FIFA”, where the letter “I” and the ⚽ soccer ball are placed inside a special wrapper so they can be animated separately.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>soccer boucing animation</title>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://public.codepenassets.com/js/prefixfree-1.0.7.min.js"></script>
</head>
<body>
<div class="title">
<span>F</span>
<span class="soccer-wrapper">
<span class="letter">I</span>
<span class="soccer">⚽</span>
</span>
<span>FA</span>
</div>
</body>
</html>
CSS :
The CSS styles the page by importing fonts, centering the content, and adding a patterned background. It also creates animations that make the “I” letter bounce and stretch, while the ⚽ soccer ball continuously rotates and bounces above it, giving the FIFA text a fun football-themed effect.
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap");
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
color: #222;
font-family: "Libre Franklin", sans-serif;
background-color: #ececec;
background-image: repeating-linear-gradient(45deg, #fffa 0 1px, transparent 1px 30px), repeating-linear-gradient(-45deg, #fffa 0 1px, transparent 1px 30px);
display: flex;
justify-content: center;
align-items: center;
}
.title {
display: flex;
align-items: flex-end;
gap: 8px;
font-size: 100px;
font-weight: 900;
line-height: 1cap;
}
.soccer-wrapper {
position: relative;
}
@keyframes letter-bounce {
0% {
transform: scaleX(1.2) scaleY(0.75);
}
45% {
transform: scaleX(1) scaleY(1);
}
}
.letter {
display: inline-block;
will-change: transform;
animation: letter-bounce 0.35s ease both infinite alternate;
transform-origin: bottom center;
}
@keyframes bounce {
from {
translate: -50% 100%;
}
to {
translate: -50% 0;
}
}
@keyframes rotate {
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
}
.soccer {
position: absolute;
bottom: 100%;
left: 50%;
translate: -50% 0;
--size: 50px;
width: var(--size);
height: var(--size);
font-size: calc(var(--size) * 0.8);
margin-bottom: 25px;
will-change: transform;
animation: rotate 4s both linear infinite, bounce 0.35s ease-out both infinite alternate;
display: flex;
justify-content: center;
align-items: center;
font-family: "Noto Emoji", sans-serif;
}
In this project, we created a FIFA-inspired loading animation using only HTML and CSS. We learned how to use CSS keyframes, transforms, positioning, and animations to make the soccer ball bounce and rotate while adding movement to the FIFA text. This fun project is a great way to practice creative CSS animations and build engaging UI effects without using JavaScript. ⚽🚀
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
