CSS Animations Tutorial

Master CSS Animations

CSS animations add life to websites with smooth, engaging effects. This 2025 tutorial teaches you six unique animations using @keyframes, from fading text to bouncing balls. All examples run in the browser and are optimized for small outputs, perfect for beginners and web designers.

Why Learn CSS Animations?

Animations enhance user engagement and make interfaces stand out. This tutorial covers:

Creating animations with @keyframes and animation properties.
Animating text, shapes, and backgrounds.
Adding interactivity with JavaScript for toggling animations.
Optimizing for performance and accessibility.

Best Practices

Use transform and opacity for efficient animations. Keep durations short (1–3s), test across devices, and respect prefers-reduced-motion for accessibility. Avoid heavy CSS properties like width or height.

Example 1: Fading Text Animation

This example animates text to fade in and out using opacity. It’s simple and looks great in small iframes.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Fading Text</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                }

                                .fade-text {
                                    color: #ffffff;
                                    font-size: 2em;
                                    font-weight: 600;
                                    animation: fade 3s infinite ease-in-out;
                                }

                                @keyframes fade {
                                    0%, 100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: 0;
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .fade-text {
                                        animation: none;
                                    }
                                }
</style>
</head>
<body>
                            <h1 class="fade-text">Hello, Webshs!</h1>
</body>
</html>

Download Code

Live Output

Note: Edit the text or animation duration. The fade effect is smooth and works well in small outputs. Test with prefers-reduced-motion for accessibility.

Example 2: Rotating Square Animation

This example rotates a square continuously using transform. It’s simple and scales well in small iframes.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Rotating Square</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                }

                                .square {
                                    width: 100px;
                                    height: 100px;
                                    background: linear-gradient(135deg, #ff6f61, #1e90ff);
                                    animation: rotate 4s linear infinite;
                                }

                                @keyframes rotate {
                                    0% {
                                        transform: rotate(0deg);
                                    }

                                    100% {
                                        transform: rotate(360deg);
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .square {
                                        animation: none;
                                    }
                                }
</style>
</head>
<body>
                            <div class="square"></div>
</body>
</html>

Download Code

Live Output

Note: Adjust the square’s size or rotation speed. The animation is smooth and visible in small outputs.

Example 3: Scaling Circle Animation

This example animates a circle to grow and shrink using transform: scale. Perfect for small screens.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Scaling Circle</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                }

                                .circle {
                                    width: 80px;
                                    height: 80px;
                                    background: #1e90ff;
                                    border-radius: 50%;
                                    animation: scale 2s ease-in-out infinite;
                                }

                                @keyframes scale {
                                    0%, 100% {
                                        transform: scale(1);
                                    }

                                    50% {
                                        transform: scale(1.5);
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .circle {
                                        animation: none;
                                    }
                                }
</style>
</head>
<body>
                            <div class="circle"></div>
</body>
</html>

Download Code

Live Output

Note: Change the circle’s color or scale factor. The animation is lightweight and clear in small outputs.

Example 4: Sliding Line Animation

This example animates a horizontal line sliding left to right using transform: translateX.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Sliding Line</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                }

                                .line {
                                    width: 150px;
                                    height: 10px;
                                    background: #ff6f61;
                                    animation: slide 3s ease-in-out infinite;
                                }

                                @keyframes slide {
                                    0% {
                                        transform: translateX(-100px);
                                    }

                                    50% {
                                        transform: translateX(100px);
                                    }

                                    100% {
                                        transform: translateX(-100px);
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .line {
                                        animation: none;
                                    }
                                }
</style>
</head>
<body>
                            <div class="line"></div>
</body>
</html>

Download Code

Live Output

Note: Modify the line’s width or animation distance. The sliding effect is clear and effective in small outputs.

Example 5: Color-Changing Background

This example animates a div’s background color through multiple hues using background-color.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Color-Changing Background</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                }

                                .color-box {
                                    width: 150px;
                                    height: 150px;
                                    animation: colorChange 5s infinite;
                                }

                                @keyframes colorChange {
                                    0% {
                                        background: #ff6f61;
                                    }

                                    33% {
                                        background: #1e90ff;
                                    }

                                    66% {
                                        background: #ffd700;
                                    }

                                    100% {
                                        background: #ff6f61;
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .color-box {
                                        animation: none;
                                        background: #ff6f61;
                                    }
                                }
</style>
</head>
<body>
                            <div class="color-box"></div>
</body>
</html>

Download Code

Live Output

Note: Customize the colors or timing in @keyframes. The color transition is vibrant and clear in small outputs.

Example 6: Bouncing Ball Animation

This example animates a ball bouncing up and down, with a JavaScript toggle for interactivity. It’s optimized for small screens.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Bouncing Ball</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    flex-direction: column;
                                    gap: 20px;
                                }

                                .ball {
                                    width: 50px;
                                    height: 50px;
                                    background: #1e90ff;
                                    border-radius: 50%;
                                    animation: bounce 1.5s ease-in-out infinite;
                                }

                                    .ball.paused {
                                        animation-play-state: paused;
                                    }

                                @keyframes bounce {
                                    0%, 100% {
                                        transform: translateY(0);
                                    }

                                    50% {
                                        transform: translateY(-100px);
                                    }
                                }

                                @media (prefers-reduced-motion) {
                                    .ball {
                                        animation: none;
                                    }
                                }

                                .toggle-btn {
                                    padding: 10px 20px;
                                    background: #ff6f61;
                                    color: #ffffff;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                }
</style>
</head>
<body>
                            <div class="ball"></div>
                            <button class="toggle-btn" onclick="toggleAnimation()">Toggle Animation</button>
                            <script>
                                function toggleAnimation() {
                                    const ball = document.querySelector('.ball');
                                    ball.classList.toggle('paused');
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click the toggle button to pause/resume the animation. Adjust the bounce height or speed. The effect is clear in small outputs.

Next Steps

Experiment with other properties like box-shadow or border-radius. Try combining animations or adding CSS transitions. Explore Webshs Tutorials for Web Development, Android Apps, or Data Science, or see Button Animations for more UI ideas.