CSS animations are a powerful tool for web developers looking to add interactive and visually appealing elements to their websites. In this tutorial, we’ll dive into creating a mesmerizing 3D rings animation using pure CSS. This effect can captivate your audience and elevate the user experience on your site. Whether you’re new to CSS or looking to enhance your skills, this guide will walk you through the process step by step.
Why Use CSS for Animations?
CSS animations offer several advantages:
- Performance: CSS animations are generally more efficient than JavaScript animations, ensuring smoother performance on various devices.
- Simplicity: CSS provides a straightforward syntax for animations, making it easier to implement and maintain.
- Browser Support: Modern browsers support CSS animations, ensuring a wide reach for your animations.
Understanding the 3D Rings Animation
The 3D rings animation involves multiple elements rotating and scaling to create a dynamic, three-dimensional effect. By using CSS properties like transform, translateZ, and rotateX, we can achieve this stunning visual. The keyframes in CSS allow us to define the animation’s stages, ensuring smooth transitions and continuous looping.
Step-by-Step Guide to Create the 3D Rings Animation
1. Setting Up the HTML Structure
To begin, we create a simple HTML structure containing a container for our rings. Each ring will be represented by a div element containing several i elements. This setup allows us to style and animate the rings effectively.
2. Styling the Rings with CSS
Next, we style our rings using CSS. The main properties we’ll focus on include:
- Transformations: Using
rotateXandtranslateZto position and animate the rings in 3D space. - Animations: Defining keyframes for translation and scaling to create a continuous rotation and zoom effect.
- Pseudo-Elements: Utilizing
::beforeand::afterto enhance the visual appeal of the rings.
3. Implementing Animations
With our structure and styles in place, we define the animations using CSS keyframes. These keyframes will control the movement and scaling of the rings over time, creating a seamless animation loop. By adjusting the duration and easing functions, we can fine-tune the animation to achieve the desired effect.
Benefits of Adding 3D Animations to Your Website
Incorporating 3D animations into your website can provide numerous benefits:
- Engagement: Interactive elements can grab users’ attention and keep them engaged longer.
- Aesthetics: Visually appealing animations enhance the overall design and feel of your site.
- User Experience: Well-designed animations can guide users through your content, improving navigation and usability.
Conclusion
Creating a 3D rings animation with CSS is a fantastic way to add depth and interactivity to your website. By following this guide, you can implement a stunning visual effect that will impress your audience and elevate your web design skills.
Copy the Code Below
Ready to get started? You can copy the complete CSS code for the 3D rings animation below. Simply paste it into your project, and watch the magic unfold on your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rings Animation</title>
<style>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #000;
min-height: 100vh;
display: grid;
place-items: center;
perspective: 800px;
overflow: hidden;
}
body * {
transform-style: preserve-3d;
}
.rings {
position: relative;
transform: rotateX(60deg);
}
.rings div {
position: absolute;
animation:
ringTranslate 14s var(--delay, 0s) infinite linear,
ringScale 28s var(--delay, 0s) infinite ease-in-out;
}
@keyframes ringTranslate {
0%, 100% { translate: 0 0 -12em; }
90% { translate: 0 0 12em; animation-timing-function: ease-in-out; }
}
@keyframes ringScale {
0%, 5%, 8%, 11.5%, 14.5%, 18%, 21%, 24.5%, 27.5%, 30.5%, 34%, 36.5%, 40.5%, 50%, 55%, 58%, 61.5%, 64.5%, 68%, 71%, 74.5%, 77.5%, 80.5%, 84%, 86.5%, 90.5% { scale: 1; }
6%, 19%, 32%, 62.5%, 75.5%, 88.5% { scale: 1.3; }
12.5%, 25.5%, 38.5%, 56%, 69%, 82% { scale: 0.7; }
}
.rings div:nth-child(1) { --delay: 0s; --hue: 0; }
.rings div:nth-child(2) { --delay: -16s; --hue: 51.4285714286; }
.rings div:nth-child(3) { --delay: -32s; --hue: 102.8571428571; }
.rings div:nth-child(4) { --delay: -48s; --hue: 154.2857142857; }
.rings div:nth-child(5) { --delay: -64s; --hue: 205.7142857143; }
.rings div:nth-child(6) { --delay: -80s; --hue: 257.1428571429; }
.rings div:nth-child(7) { --delay: -96s; --hue: 308.5714285714; }
.rings div i {
--color: hsl(var(--hue, 0) 75% var(--light, 75%));
--r: 0.8em;
position: absolute;
inset: -8em;
background-image: radial-gradient(transparent, #0001 calc(6.8em - var(--r)), var(--color) 0 calc(7.2em + var(--r)), transparent 0);
transform: translateZ(var(--translateZ, 0));
}
.rings div i:nth-child(1) { --translateZ: calc((0 - 5.5) * 3px); --light: 40%; --r: calc(sin(0deg) * 0.8em); }
.rings div i:nth-child(2) { --translateZ: calc((1 - 5.5) * 3px); --light: 43%; --r: calc(sin(15deg) * 0.8em); }
.rings div i:nth-child(3) { --translateZ: calc((2 - 5.5) * 3px); --light: 46%; --r: calc(sin(30deg) * 0.8em); }
.rings div i:nth-child(4) { --translateZ: calc((3 - 5.5) * 3px); --light: 49%; --r: calc(sin(45deg) * 0.8em); }
.rings div i:nth-child(5) { --translateZ: calc((4 - 5.5) * 3px); --light: 52%; --r: calc(sin(60deg) * 0.8em); }
.rings div i:nth-child(6) { --translateZ: calc((5 - 5.5) * 3px); --light: 55%; --r: calc(sin(75deg) * 0.8em); }
.rings div i:nth-child(7) { --translateZ: calc((6 - 5.5) * 3px); --light: 58%; --r: calc(sin(90deg) * 0.8em); }
.rings div i:nth-child(8) { --translateZ: calc((7 - 5.5) * 3px); --light: 61%; --r: calc(sin(105deg) * 0.8em); }
.rings div i:nth-child(9) { --translateZ: calc((8 - 5.5) * 3px); --light: 64%; --r: calc(sin(120deg) * 0.8em); }
.rings div i:nth-child(10) { --translateZ: calc((9 - 5.5) * 3px); --light: 67%; --r: calc(sin(135deg) * 0.8em); }
.rings div i:nth-child(11) { --translateZ: calc((10 - 5.5) * 3px); --light: 70%; --r: calc(sin(150deg) * 0.8em); }
.rings div i:nth-child(12) { --translateZ: calc((11 - 5.5) * 3px); --light: 73%; --r: calc(sin(165deg) * 0.8em); }
.rings div i:nth-child(13) { --translateZ: calc((12 - 5.5) * 3px); --light: 76%; --r: calc(sin(180deg) * 0.8em); }
</style>
</head>
<body>
<div class="rings">
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>
</body>
</html>