Article Categories

Selected Reading

How to create sliding text reveal animation using HTML and CSS?

HTML CSS Web Development Front End Technology

Sliding text reveal animations create engaging visual effects that bring text to life on web pages. These animations typically reveal text by sliding it into view from different directions, creating a smooth and professional appearance that enhances user experience.

Syntax

@keyframes animationName {
    0% { /* initial state */ }
    50% { /* intermediate state */ }
    100% { /* final state */ }
}

selector {
    animation: animationName duration timing-function;
}

Method 1: Simple Sliding Text Reveal

This example demonstrates a basic sliding text reveal animation where text slides in from the left

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2c3e50;
        font-family: Arial, sans-serif;
    }
    
    .sliding-text {
        font-size: 3rem;
        font-weight: bold;
        color: white;
        overflow: hidden;
        white-space: nowrap;
        animation: slideReveal 2s ease-in-out forwards;
        width: 0;
    }
    
    @keyframes slideReveal {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="sliding-text">Welcome to Our Website!</div>
    </div>
</body>
</html>

Text appears by sliding in from left to right with a smooth reveal effect against a dark blue background.

Method 2: Multi-Stage Text Reveal

This example creates a more complex animation with multiple text elements sliding in sequence

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin: 0;
        font-family: 'Arial', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .text-container {
        text-align: center;
        overflow: hidden;
    }
    
    .text-line {
        font-size: 2.5rem;
        color: white;
        margin: 10px 0;
        transform: translateX(-100%);
        animation: slideIn 1s ease-out forwards;
    }
    
    .text-line:nth-child(1) {
        animation-delay: 0.5s;
    }
    
    .text-line:nth-child(2) {
        animation-delay: 1s;
    }
    
    .text-line:nth-child(3) {
        animation-delay: 1.5s;
    }
    
    @keyframes slideIn {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>
</head>
<body>
    <div class="text-container">
        <div class="text-line">Good Morning!</div>
        <div class="text-line">How was your day?</div>
        <div class="text-line">Welcome to our site!</div>
    </div>
</body>
</html>

Three lines of text slide in sequentially from left to right with staggered delays, creating a cascading reveal effect on a gradient background.

Method 3: Typewriter Effect with Sliding Border

This example combines a typewriter effect with a sliding border reveal

<!DOCTYPE html>
<html>
<head>
<style>
    .typewriter-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #1a1a1a;
    }
    
    .typewriter-text {
        font-size: 2rem;
        color: #00ff88;
        border-right: 3px solid #00ff88;
        font-family: 'Courier New', monospace;
        white-space: nowrap;
        overflow: hidden;
        animation: typing 3s steps(25) 1s forwards, blink 0.8s infinite;
        width: 0;
    }
    
    @keyframes typing {
        0% {
            width: 0;
        }
        100% {
            width: 25ch;
        }
    }
    
    @keyframes blink {
        0%, 50% {
            border-color: #00ff88;
        }
        51%, 100% {
            border-color: transparent;
        }
    }
</style>
</head>
<body>
    <div class="typewriter-container">
        <div class="typewriter-text">Creating amazing content...</div>
    </div>
</body>
</html>

Text appears character by character like a typewriter with a blinking green cursor, creating a coding terminal effect on a dark background.

Key Animation Properties

Property	Description	Example Values
`animation-duration`	How long the animation takes	1s, 2.5s, 500ms
`animation-delay`	Delay before animation starts	0.5s, 1s, 200ms
`animation-timing-function`	Speed curve of animation	ease-in-out, linear, ease
`animation-fill-mode`	Style before/after animation	forwards, backwards, both

Conclusion

Sliding text reveal animations use CSS keyframes and transform properties to create engaging visual effects. By combining different timing functions, delays, and transform values, you can create sophisticated text animations that enhance user experience and draw attention to important content on your website.

Tanmay Chandhok

Updated on: 2026-03-15T16:09:52+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next