Skip to main content

How to Create a Smooth CSS Input Label Character Animation | FAMOUSCODE

This is a complete, production-ready code for a CSS Input Label Character Animation. Users can copy the entire block and run it directly in any browser.

Live UI Preview

FULL HTML5 CODE 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Animation - FAMOUSCODE</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
            font-family: sans-serif;
        }
        .input-container {
            position: relative;
            width: 300px;
        }
        .input-container input {
            width: 100%;
            padding: 15px;
            border: 2px solid #ccc;
            border-radius: 8px;
            outline: none;
            font-size: 16px;
        }
        .input-container input:focus { border-color: #0d9488; }
        .label-wave {
            position: absolute;
            left: 15px;
            top: 15px;
            display: flex;
            pointer-events: none;
        }
        .label-wave span {
            transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            color: #999;
        }
        .input-container input:focus ~ .label-wave span,
        .input-container input:valid ~ .label-wave span {
            color: #0d9488;
            transform: translateY(-35px);
        }
    </style>
</head>
<body>

    <div class="input-container">
        <input type="text" required>
        <label class="label-wave">
            <span style="transition-delay:0ms">L</span>
            <span style="transition-delay:50ms">o</span>
            <span style="transition-delay:100ms">g</span>
            <span style="transition-delay:150ms">i</span>
            <span style="transition-delay:200ms">n</span>
        </label>
    </div>

</body>
</html>

Follow @famouscode.dev for more 1-line coding hacks!

Labels: