Project demo
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Label Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input-box">
<input required="" type="text" class="input">
<label class="label">
<span class="char" style="--index: 0; padding-left: 5px;">E</span>
<span class="char" style="--index: 1">m</span>
<span class="char" style="--index: 2">a</span>
<span class="char" style="--index: 3">i</span>
<span class="char" style="--index: 4; padding-right: 5px;">l</span>
</label>
</div>
</body>
css code
/* Input Label Text Styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
display: grid;
height: 100%;
background: #e8e8e8;
place-items: center;
font-family: 'Poppins', sans-serif;
}
.input-box .input {
font-size: 16px;
outline: none;
padding: 10px 15px;
display: block;
width: 200px;
border: none;
border-radius: 7px;
border: 2px solid #999;
background: transparent;
}
.input-box .input:focus,
.input-box .input:valid {
border-color: #3679ff;
}
.input-box {
position: relative;
}
.input-box .label {
color: #999;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
display: flex;
}
.input-box .char {
transition: .2s ease all;
transition-delay: calc(var(--index) * .05s);
}
.input-box .input:focus~label .char,
.input-box .input:valid~label .char {
transform: translateY(-20px);
font-size: 14px;
color: #3679ff;
background: #e8e8e8;
}
