Ihr habt das ja sicher auch schon öfters bei Formulare gesehen. Da steht beim Input Feld dann immer schön was man hier eingeben soll und wenn man auf das Formular klickt, dann verschiebt sich der Text nach oben oder unten oder sonst wie. Es ist also kein einfacher Placeholder sondern die ganze Animation wurde mit dem Label erstellt.

Heute zeige ich euch wie das geht

Video

HTML

<div class="container">
        <form action="" method="post" class="form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Max Mustermann" id="name" name="name" tabindex="1"
                    required>
                <label for="name" class="form-label">Dein Name</label>
            </div>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="info@deineurl.com" id="email" name="email"
                    tabindex="2" required>
                <label form="email" class="form-label">Deine eMail</label>
            </div>
        </form>
    </div>

CSS

.container {
    width: 64vw;
    box-shadow: 0 15px 30px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.7);
    padding: 2em;
    background-color: #fff;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 1em;
    transition: all 300ms;
}

.form-label {
    font-size: 1em;
    color: #aaa;
    display: block;
    opacity: 1;
    transform: translateY(-20px);
    transform-origin: 0 0;
    transition: all 300ms;
    cursor: crosshair;

}

.form-control {
    border-color: #ccc;
    border-style: none none solid;
    width: 100%;
    padding: 5px;
    transition: all 500ms;
}

.form-control::placeholder {
    color: transparent;
}

.form-control:focus {
    outline: none;
    border-color: orange;
}

.form-group:focus-within {
    transform: scale(1.05, 1.05);
}

.form-control:focus+.form-label {
    transform: translateY(-2.5em) scale(0.8);
}

.form-control:not(:placeholder-shown)+.form-label {
    transform: translateY(-2.5em) scale(0.8);
}