Animated Background With Pure Css And Html

5 min read Jun 28, 2024

Animated Background with Pure CSS and HTML

Creating visually appealing and engaging web pages often involves incorporating animations. While using JavaScript libraries can be a powerful tool, achieving basic animations with pure CSS and HTML offers a lightweight and efficient approach. This article will guide you through creating an animated background using just these two fundamental technologies.

HTML Structure

First, we need to set up the basic HTML structure. For this example, we will create a simple container that will hold our animated background:




    
    
    Animated Background

In this code, we have a container div that will contain our entire background animation and a nested background div that will hold the actual animation elements.

CSS Styling

Now, let's add CSS to style and animate the background. We'll be using CSS properties like background-color, position, animation and transform to create the animation.

.container {
    width: 100%;
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.background {
    width: 500px;
    height: 500px;
    background-color: #007bff;
    position: relative;
    animation: move 3s linear infinite;
    border-radius: 50%;
}

@keyframes move {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(200px) translateY(200px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

Explanation:

Container:
- We set the container's width and height to cover the entire viewport.
- A light gray background color is applied.
- The display, align-items and justify-content properties center the background element within the container.
- overflow: hidden ensures that the animated elements stay within the container boundaries.
Background:
- A blue background color is assigned to the background div.
- We use position: relative to allow positioning of the animated elements.
- The animation property is used to define a keyframe animation named "move," with a duration of 3 seconds, linear timing function, and infinite iterations.
- A rounded shape is applied to the background with border-radius.
Keyframes:
- The @keyframes move block defines the animation steps.
- At 0%, the element stays in its initial position.
- At 50%, the element is translated 200px horizontally and vertically.
- At 100%, the element returns to its initial position, completing the animation cycle.

Customizing the Animation

This is a basic example, and you can easily customize the animation by adjusting the following:

Animation Timing: Modify the animation-duration, animation-timing-function, and animation-iteration-count properties to control the animation speed, timing curve, and number of repetitions.
Keyframe Positions: Adjust the percentage values within the keyframes to control the animation's progression.
Transform Properties: Use other CSS transform properties like scale, rotate, or skew to create different animation effects.
Multiple Animated Elements: Create multiple div elements within the background and apply different animations to each element.

Conclusion

Using CSS and HTML alone, you can create captivating animated backgrounds without relying on JavaScript libraries. By understanding the fundamental CSS properties for animation, you can create custom effects to enhance your web pages. Experiment with different techniques to bring your creative ideas to life!

Animated Background With Pure Css And Html