Creating an Animated Element with HTML5 and CSS

HTML5 Animation Example with a Moving Sphere

This example demonstrates how to create a continuously moving element on a web page using HTML5, CSS3, and JavaScript. We'll explore both CSS animations and JavaScript-based approaches to achieve dynamic motion effects. ### HTML Structure (index.html)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Sphere</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div id="movingSphere" class="sphere"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Implementation (styles.css)

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.sphere {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: circularMotion 3s ease-in-out infinite;
}

@keyframes circularMotion {
    0% {
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }
    25% {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    50% {
        top: 50%;
        left: calc(100% - 70px);
        transform: translateY(-50%);
    }
    75% {
        top: calc(100% - 70px);
        left: 50%;
        transform: translateX(-50%);
    }
    100% {
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }
}

JavaScript Alternative (script.js)

While CSS animations handle this case efficiently, here's a JavaScript implementation using requestAnimationFrame for more complex control:

const sphere = document.getElementById('movingSphere');
let position = { x: 10, y: window.innerHeight / 2 };
let velocity = { x: 3, y: 2 };
let direction = { x: 1, y: 1 };

function animateSphere() {
    // Update position based on velocity
    position.x += velocity.x * direction.x;
    position.y += velocity.y * direction.y;
    
    // Boundary collision detection
    const sphereSize = 60;
    const maxX = window.innerWidth - sphereSize;
    const maxY = window.innerHeight - sphereSize;
    
    if (position.x <= 0 || position.x >= maxX) {
        direction.x *= -1;
        position.x = Math.max(0, Math.min(maxX, position.x));
    }
    
    if (position.y <= 0 || position.y >= maxY) {
        direction.y *= -1;
        position.y = Math.max(0, Math.min(maxY, position.y));
    }
    
    // Apply new position
    sphere.style.left = position.x + 'px';
    sphere.style.top = position.y + 'px';
    
    // Continue animation loop
    requestAnimationFrame(animateSphere);
}

// Start the animation when page loads
window.addEventListener('load', () => {
    // Comment this out to use CSS animation instead
    // animateSphere();
});

Key CSS Animation Concepts

@keyframes Rule: Defines animation sequences by specifying styles at various points during the animation timeline
Percentage Markers: Use 0% (start) to 100% (end) to define intermediate states
Animation Properties: Control duration, timing function, iteration count, and direction
Browser Prefixes: Include -webkit- and -moz- for legacy browser support when needed
Transform Functions: Enable more efficient animations than changing position properties directly

Advanced CSS Animation Example

.advancedSphere {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a);
    border-radius: 50%;
    animation: 
        complexPath 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite,
        rotateSphere 2s linear infinite;
}

@keyframes complexPath {
    0% {
        top: 20px;
        left: 20px;
        transform: scale(1) rotate(0deg);
    }
    33% {
        top: calc(100% - 100px);
        left: calc(100% - 100px);
        transform: scale(1.2) rotate(120deg);
    }
    66% {
        top: calc(100% - 100px);
        left: 20px;
        transform: scale(0.8) rotate(240deg);
    }
    100% {
        top: 20px;
        left: 20px;
        transform: scale(1) rotate(360deg);
    }
}

@keyframes rotateSphere {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

Performance Considerations

For optimal enimation performance:

Prefer CSS animations or transitions over JavaScript when possible
Use transform and opacity properties for better performance
Minimize layout thrashing by batching DOM reads/writes
Consider using will-change property for complex animations
Test on target devices, especially mobile browsers

Posted on Thu, 28 May 2026 22:36:58 +0000 by lbaxterl

Freaks City